要求
显示
增加
修改
点击“修改”跳转到修改页并且显示对应信息,
点击"删除"即可直接删除。
开始写代码…
[第一步⭐:初始化项目]
npm init-y[第二步⭐⭐:创建项目结构]
[第三步⭐⭐⭐:安装模板]
npm install express
npm install art-template
npm install express-art-template
npm install mysql
npm install supervisor[第四步⭐⭐⭐⭐:入口文件app.js]
//1、引入模块var express=require('express');var router=require('./routes/router.js')//2、创建web服务器 app接收var app=express();//使用模板引擎
app.engine('html',require('express-art-template'));
app.use('/public',express.static('public'));//将文件夹public设置为静态资源//路由已经放到routes.js中
app.use(router);//使用//4、启动服务listen(端口号,回调函数)
app.listen(9090,()=>{
console.log('服务器开启 http://127.0.0.1:9090/');})[第五步⭐⭐⭐⭐⭐:数据库文件mysql.js]
/**
* 访问mysql数据库
*/var mysql=require('mysql');//引入模块//创建连接var conn=mysql.createConnection({
host:'localhost',
user:'root',
password:'root',
database:'db8'//数据库名称});
conn.connect();//开启连接//导出
module.exports=conn;[第六步:路由文件router.js(增删改查)]
| 本次练习要跳转的路径 | 地址 |
|---|---|
| 首页详情页 | / |
| 数据增加页 | /addstu |
| 执行增加并返回到详情页 | /stu/create |
| 执行删除并返回到详情页 | /stu/del/:sid |
| 执行修改前的查询并返回到修改页 | /stu/selToupdate/:sid |
| 执行修改并返回到详情页 | /stu/update |
var express=require('express');var conn=require('../mysql.js');var bodyParser=require('body-parser');// 创建 application/x-www-form-urlencoded 编码解析var urlencodedParser= bodyParser.urlencoded({ extended:false});//建立一个路由容器var router=express.Router();//分页查询
router.get("/",(req,res)=>{var pagenum=2;//每页条数var page=0;if(req.query.page!=undefined){
page=parseInt(req.query.page)-1;}
console.log("page="+page);var sql="select * from students limit "+page*pagenum+","+pagenum;var sql2="select * from students";var count=0;
conn.query(sql2,(err,result,fields)=>{if(result.length%pagenum!=0){
count=parseInt(result.length/pagenum+1);}else{
count=parseInt(result.length/pagenum);}
console.log("长度="+count);})
conn.query(sql,(err,result,fields)=>{if(err){return"失败";}
console.log(result);var nums=newArray();for(var i=1;i<=count;i++){
nums.push(i);}
console.log("页码="+nums);
res.render('index.html',{
students: result,
nums:nums,
page:page});})});//跳转增加页
router.get("/addstu",(req,res)=>{
res.render("post.html");});//删除
router.get("/stu/del/:sid",(req,res)=>{
conn.query("delete from students where sid=?",req.params.sid,(err,result)=>{if(err){
console.log("删除失败",err.message);return;}
res.redirect("/");});})//修改前的查询
router.get("/stu/selToupdate/:sid",(req,res)=>{
conn.query("select *from students where sid=?",req.params.sid,(err,result)=>{if(err){
console.log("查询失败",err.message);return;}
res.render("update.html",{
stus:result});});})//修改
router.post("/stu/update",urlencodedParser,(req,res)=>{var sid=req.body.sid;var stuname=req.body.stuname;var stupwd=req.body.stupwd;var stuage=req.body.stuage;var stusex=req.body.stusex;
conn.query("update students set stuname=?,stupwd=?,stuage=?,stusex=? where sid=?",[stuname,stupwd,stuage,stusex,sid],(err,result)=>{if(err){
console.log("修改失败",err.message);return;}
res.redirect("/");});})//增加
router.post("/stu/create",urlencodedParser,(req,res)=>{var stuname=req.body.stuname;var stupwd=req.body.stupwd;var stuage=req.body.stuage;var stusex=req.body.stusex;
console.log(stuname,stupwd,stuage,stusex);
conn.query("insert into students(stuname,stupwd,stuage,stusex)values (?,?,?,?)",[stuname,stupwd,stuage,stusex],(err,result)=>{if(err){
console.log("插入失败",err.message);return;}
res.redirect("/");});})//导出
module.exports=router;[第六步⭐⭐⭐⭐⭐⭐:页面文件index.html&&post.html&&update.html]
index.html
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><title>laravel</title><!-- Bootstrap CSS 文件 --><linkrel="stylesheet"href="../public/css/bootstrap.min.css"><!-- 首页单独样式 --><linkrel="stylesheet"href="../public/css/index.css"></head><body><divclass="navbar navbar-default"><divclass="container"><divclass="navbar-header"><ahref="/"class="navbar-brand">首页</a><buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#menu"aria-expanded="false"><spanclass="sr-only">菜单折叠</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button></div><divclass="collapse navbar-collapse"id="menu"><ulclass="nav navbar-nav"><liclass="active"><ahref="/">开发</a></li><li><ahref="#">列表</a></li><li><ahref="#">头条</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">资讯<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">学习一</a></li><li><ahref="#">学习二</a></li><liclass="divider"></li><li><ahref="#">技术学习</a></li><liclass="divider"></li><li><ahref="#">jq学习</a></li></ul></li></ul><formclass="navbar-form navbar-left"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search..."></div><buttontype="submit"class="btn btn-default">搜索</button></form><ulclass="nav navbar-nav navbar-right"><li><ahref="./login.html">登录</a></li><li><ahref="./register.html">注册</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">相关<spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">系列一</a></li><liclass="divider"></li><li><ahref="#">系列二</a></li></ul></li></ul></div></div></div><!-- 头部 --><divclass="jumbotron jump"><divclass="container"><h2>玩转laravel-之首页</h2><p> 玩转- laravel</p></div></div><!-- 中间内容区局 --><divclass="container"><divclass="row"><!-- 左侧菜单区域 --><divclass="col-md-3"><divclass="list-group"><ahref="/"class