前端向全栈前行的第一步

写在前头,写了一段时间的前端,各种前端工具技术都是用过了,已经能自己完成前端的页面任务,不过在搭建自己的网站博客或者想做一个什么样的产品时总归会感觉自己知识的局限性,无法自己完成一个骨肉丰满的可交互的网站的无力使我决定向全栈工程师前行。要看下面内容除了前端(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"))

 

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