面试题目
面试20道题目
下周测试第一部分;
本章任务
掌握node的增删改查
第一步:创建node项目
第二步:修改入口程序文件
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
//用来记录日志
var logger = require('morgan');
var ejs = require('ejs');
//由于node默认支持的是get方法,不支持post body-parser
var bodyParser = require('body-parser');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/classes');
var stus = require('./routes/stus');
var app = express(); //new一个express服务器
//使用HTML模板
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');
app.engine('html',ejs.__express)
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//设置路由导航,对你所访问的资源的url的控制就是路由
//http://localhost:3000/
//http://localhost:3000/users/del
app.use('/', indexRouter);
app.use('/classes', usersRouter);
app.use('/stus',stus);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
注意:在这里需要安装body-parser,moment,ejs;
第三步:封装数据库模块db.js
let mysql = require('mysql');
//创建连接池
let pool = mysql.createPool({
host:'localhost',
port:'3306',
user:'root',
password:'123@qwe',
database:'schooldb'
});
//封装增删改查的方法
function sqlQuery(sql,pams,cb){
pool.getConnection((err,con)=>{
con.query(sql,pams,(err,result)=>{
cb(err,result);
con.release();
});
});
}
module.exports.sqlQuery = sqlQuery;
第四步:测试db.js
建立test.js
var db = require('./db');
var sql = "select * from class";
db.query(sql,[],(err,result)=>{
if(err){
console.log(err);
}else{
console.log(result);
}
})
第五步:查询所有的班级
后台代码:
var db = require('./db');
var moment = require('moment');
//安装引入
//执行查询
router.get('/findall',(req,res)=>{
var sql = "select class.ClassID,class.ClassName,class.BeginTime,class.EndTime,grade.GradeName from class,grade where class.GradeID=grade.GradeID;";
db.query(sql,[],(err,result)=>{
if(err){
console.log(err);
}else{
res.render('classes',{cs:result,moment:moment});
}
})
});
前台代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>班级管理</title>
</head>
<body>
<%if(cs.length>0){%>
<table width="80%" border="1px">
<tr>
<td>班级编号</td>
<td>班级名称</td>
<td>开班日期</td>
<td>毕业日期</td>
<td>年级名称号</td>
<td>操作</td>
</tr>
<%cs.forEach(function(c){%>
<tr>
<td><%=c.ClassID%></td>
<td><%=c.ClassName%></td>
<td><%=moment(c.BeginTime).format('YYYY-MM-DD hh:mm:ss')%></td>
<td><%=moment(c.EndTime).format('YYYY-MM-DD hh:mm:ss')%></td>
<td><%=c.GradeName%></td>
<td>操作</td>
</tr>
<% })%>
</table>
<%}%>
</body>
</html>
第六步:修改班级
逻辑:在查询的界面有个修改的链接,点击链接把要修改的班级的编号发送到后台,后台根据id查询该班级,并且还的再查询年级列表,然后把查询到的班级以及年级列表返回到修改的页面,达到页面修改回显原数据的效果;
前台在查询界面添加超链接:
<a rel="nofollow" href="/classes/toUpdate/<%=c.ClassID%>">修改</a>
<a rel="nofollow" href="/classes/del/<%=c.ClassID%>">删除</a>
在后台写查询班级和年级的方法
//跳转到修改页面
router.get('/toUpdate/:classId',(req,res)=>{
var cid = req.params.classId;
//查询该班级
var sql = 'select * from class where classid = ?';
var classDB = null;
db.select(sql,cid,(err,result)=>{
if(err){
console.log(err);
}else{
classDB = result[0];
}
})
//查询年级
db.select('select * from grade',[],(err,result)=>{
if(err){
console.log(err);
}else{
res.render('update',{cdb:classDB,gs:result,moment:moment});
}
})
});
写update.html界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/classes/update" method="post">
<input type="hidden" name="classId" value="<%=cdb.ClassID%>"/>
班级名称:<input type="text" name="className" value="<%=cdb.ClassName%>"/> <br>
开班日期:<input type="text" name="beginTime" value="<%=moment(cdb.BeginTime).format('YYYY-MM-DD hh:mm:ss')%>"/> <br>
毕业日期:<input type="text" name="endTime" value="<%=moment(cdb.EndTime).format('YYYY-MM-DD hh:mm:ss')%>"/> <br>
年级:
<select name='gradeId'>
<%gs.forEach(function(g){%>
<%if(g.GradeID==cdb.GradeID){%>
<option value="<%=g.GradeID%>" selected><%=g.GradeName%></option>
<%}else{%>
<option value="<%=g.GradeID%>"><%=g.GradeName%></option>
<% }%>
<%})%>
</select>
<input type="submit"value="修改"/>
</form>
</body>
</html>
在后台写处理修改
//处理修改
router.post('/update',(req,res)=>{
//取出form表单的数据
var {classId,className,beginTime,endTime,gradeId} = req.body;
var sql = 'update class set classname = ?,begintime = ?,endtime=?,gradeid =? where classid = ?';
var psm = [className,beginTime,endTime,gradeId,classId];
db.select(sql,psm,(err,result)=>{
if(err){
console.log(err);
}else{
res.redirect('/classes/findall');
}
})
});
第七步:添加班级
逻辑:先把年级查询出来,然后传到添加的界面上;
带着年级集合到add.html页面;
//跳转到add
router.get('/toAdd',(req,res)=>{
var sql = "select * from grade";
db.select(sql,[],(err,result)=>{
if(err){
console.log('查询年级出错'+err);
}else{
res.render('add',{gs:result});
}
});
});
写add.html页面
<form action="/classes/add" method="post">
班级名称:<input type="text" name="className"/> <br>
开班日期:<input type="text" name="beginTime"/> <br>
毕业日期:<input type="text" name="endTime"/> <br>
年级:
<select name='gradeId'>
<%gs.forEach(function(g){%>
<option value="<%=g.GradeID%>"><%=g.GradeName%></option>
<%})%>
</select>
<input type="submit"value="添加"/>
</form>
写处理添加的后台
//处理添加
router.post('/add',(req,res)=>{
//把form表单的数据拿过来
//post提交的数据在body里面封装,get方式提交的数据在req.params里面封装着;
var {className,beginTime,endTime,gradeId} = req.body;
//var className = req.body.className
//var beginTime = req.body.beginTime
var sql = "insert into class(classname,begintime,endtime,gradeid) values(?,?,?,?)";
var pms = [className,beginTime,endTime,gradeId];
db.select(sql,pms,(err,result)=>{
if(err){
console.log('添加出错'+err);
}else{
res.redirect('/classes/findall')
}
})
});
注意:es6的语法结构赋值;
第八步:删除
//删除
router.get('/del/:id',(req,res)=>{
var classId = req.params.id;
db.select('delete from class where classid = ?',classId,(err,result)=>{
if(err){
console.log(err);
}else{
res.redirect('/classes/findall');
}
})
});
课后练习
熟练掌握班级的增删改查