前端向全棧前行的第一步

寫在前頭,寫了一段時間的前端,各種前端工具技術都是用過了,已經能自己完成前端的頁面任務,不過在搭建自己的網站博客或者想做一個什麼樣的產品時總歸會感覺自己知識的侷限性,無法自己完成一個骨肉豐滿的可交互的網站的無力使我決定向全棧工程師前行。要看下面內容除了前端(js,css,html)的技術的需要粗略的掌握以下知識:node.js  mysql操作

使用的後端技術棧爲node(ejs模板)和mysql數據庫(navicate)。

 

1、首先是搭建mysql服務,因爲不太懂怎麼配置所以使用了wampserver。下載好之後進入步驟如下

①打開WAMP的mysql控制檯,提示輸入密碼,開始密碼爲空,直接按回車

②輸入【use mysql】,控制檯提示【Database changed】

③輸入【update mysql.user set authentication_string=password('root') where user='root' ;】           控制檯提示【Query OK,XXXXXXXXX】

④最後輸入【flush privileges】,提交

⑤輸入【quit】,退出

⑥在目錄wamp\apps下找到phpmyadmin文件夾下的【config.inc.php】文件, 修改【$cfg['Servers'][$i]['password'] = ''】;爲【$cfg['Servers'][$i]['password'] = '要修改的密碼';】。

重新啓動服務即可

 

2、打開navicate,如下圖所看到(我這已經添加了數據庫和數據)步驟爲先添加鏈接---然後鏈接測試----成功的話確定----新建數據庫(如上datebase,其餘四個自帶的)----設計表-----操作數據

 

3、用node搭建一個後臺,模塊化開發,推薦express框架。給大家看一下我的後臺處理代碼,比較簡單,只有幾個接口,前臺頁面默認已經掌握不需要講解。

const mysql = require('mysql');
const fs = require('fs');
const multer= require('multer');
const bodyparser= require('body-parser');
const express= require('express');
var Multer=multer({dest:"./static/upload"});
const consolidate = require('consolidate');
var server = express();
var data={}; 
server.listen(8080);
var db=mysql.createPool({host:"localhost",user:"root",password:"ayuan",database:"datebase"});
server.set("view engime","html");
server.set("views","./views");
server.engine("html",consolidate.ejs)

server.use("/index",(req,res)=>{
	db.query(`SELECT ID,title,summary FROM article_table`,(err,data)=>{
		if(err){
			console.log(err)
			res.send(err.status);
			
		}else{
			// data.article=data2;
			console.log(data)
			res.render("index.ejs",{data:data});
			res.end();
		}
	})
	// res.render("index.ejs",data);
});
server.use("/art",(req,res)=>{
	
	db.query(`SELECT * FROM article_table WHERE ID=${req.query.id}`,(err,data3)=>{
		if(err){
			res.send(err.status);
			
		}else{
			function getfull(x){
				return x<10?"0"+x:x;
			}
			var dates=new Date();
		 	data3[0].post_time=parseInt(data3[0].post_time)*1000;
			//dates.setMilliseconds(data3[0].post_time);
			data3[0].post_time=dates.getFullYear()+"-"+getfull(dates.getMonth())+"-"+getfull(dates.getDay())+" "+getfull(dates.getHours())+":"+getfull(dates.getMinutes())+":"+getfull(dates.getSeconds());
			
			res.render("article.ejs",{"data":data3});
			res.end();
		}
	})
})
server.use("/zan",(req,res)=>{
	db.query(`UPDATE article_table SET n_like=n_like+1 WHERE ID=${req.query.id}`,(err)=>{
		if(err){
			res.send(err.status);
			
		}else{
			var page=req.query.id;
			console.log(page);
			db.query(`SELECT n_like FROM article_table WHERE ID=${req.query.id}`,(err,data)=>{
				res.send(data)
			})
			//res.redirect("/art?id="+page);   .                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
			
		
		}
	})
})
server.use(express.static(__dirname+"/static"))

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章