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

51 阅读 0 评论 34 点赞

我是靠谱客的博主从容玫瑰，最近开发中收集的这篇文章主要介绍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;