node(express脚手架)+html(jquery模板)

75 阅读 0 评论 50 点赞

我是靠谱客的博主粗犷茉莉，最近开发中收集的这篇文章主要介绍node(express脚手架)+html(jquery模板)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

上代码

html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>123</div>
<input id="id" type="text">
<input id="inp" type="text">
<input id="inp1" type="text">
<button id="but">提交</button>
<h1 id="h1"></h1>
<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){$('#inp').val('');$('#inp1').val('')}())
$('#but').click(()=>{
$.ajax({
method: "GET",
url:"http://localhost:3000/qwe",
data:{id:$('#id').val(),name:$('#inp').val(),skill:$('#inp1').val()},
success: function(data){
console.log(data);
$('#inp').val('')
$('#inp1').val('')
}
})
})
</script>
</html>

node部分

下载依赖
// 下载框架
npm install express
// 下载脚手架
npm install express-generator
// 创建项目(app:自定义)
express app
// 下载数据库
npm install mysql
// 解决跨域
npm install cors
// 热更新
npm install nodemon
// 运行项目
npm start

// package.json代码
"scripts": {
// 添加下面这短代码,热更新
"start": "nodemon ./bin/www"
},

// app.js代码
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
// 解决跨域
var cors=require('cors')
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(cors());
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')));
// 路由,写接口
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 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;

// 新建文件让项目和mysql数据库建立连接
var mysql = require('mysql');
var connection = mysql.createConnection({
host
: 'localhost',
user
: '名字',
password : '密码',
// 数据库名
database : 'test'
});
// 封装SQL语句
function query(sql){
return new Promise((resolve, reject) => {
try {
connection.query(sql,(err, result)=>{
if(err){
reject(new Error(err));
}
resolve(result)
});
} catch (error) {
reject(new Error(err));
}
})
}
module.exports = query;

// routers/index.js文件中
var express = require('express');
var router = express.Router();
// 引入封装好的mysql文件
var query = require('../utils/my')
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/qwe',async(req,res)=>{
const {id,name,skill}=req.query
// 查找所有
// let sz =await query('SELECT * from userinof')
// 新增
// let sz = await query(`insert into userinof values(null,'${name}','${skill}')`)
// 修改
// let sz = await query(`UPDATE userinof SET name='${name}',skill='${skill}' WHERE (id='${id}')`)
// 删除
let sz = await query(`delete from userinof where id = '${id}'`)
console.log(sz);
res.send({wen:'成功',sz})
})
module.exports = router;