项目中用浏览器手动添加数据的详细步骤（超全）

第一步：新建项目

1.将 Express 应用程序生成器安装到全局环境中并执行

$ npm install -g express-generator
$ express

2.创建自己的项目

$ express music -e

3.按照提示信息安装模块

$ cd music
$ npm install

第二步：启动项目

1.在全局环境下安装nodemon

$ npm install -global nodemon

2.在package.json中把node改成nodemon

3.启动项目

$ npm start

第三步：配置数据库

1.下载安装mongoose

$ cnpm i mongoose

2.打开cmd命令启动数据库

$ mongod --dbpath=C:\mdb --port=27017

3.新建model文件夹，在里面配置Schema、Model

var mongoose = require('mongoose');
var userSchema = mongoose.Schema({
    name :String ,
    star :String
});
var UserModel = mongoose.model('musiclist' , userSchema);
module.exports = UserModel;

4.打开www文件，在相应位置链接数据库

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/musiclist',(err)=>{
  if(err){
    console.log('数据库连接失败');
    return;
  }
})

第四步：配置路由，在routes文件夹中按照需求修改文件配置项

1.index.js:手动添加数据的操作页面

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/index', function(req, res, next) {
  res.render('index');
});
module.exports = router;

2.add.js:数据库新增数据的页面

var express = require('express');
var router = express.Router();
// 引入配置项
var MovieModel = require('../model/index')
router.post('/add', function (req, res, next) {
  var body = req.body;
  // 添加数据入库
  MovieModel(body).save().then((info)=>{
    res.send("<script>location.assign('/list')</script>")
  })
});
module.exports = router;

3.users.js:数据展示页面

var express = require('express');
var router = express.Router();
// 引入配置项
var MovieModel = require('../model/index')
/* post users listing. */
router.get('/list', function (req, res, next) {
  var body = req.body;
  // 接收数据
  MovieModel.find({},(err,info)=>{
    // 渲染数据
    res.render('list',{
        info : info
    });
  })
});
module.exports = router;

第五步：写入页面，在view文件夹中按照需求修改文件配置项

1.index.ejs:手动添加数据的操作页面

 <form action="/add" method="POST">
        歌名：<input type="text" name="name"> 
        歌手：<input type="text" name="star">
        <button type="submit">添加</button>
 </form>

2.list.js:数据展示页面

 <ul>
    <% info.forEach((v)=>{ %>
      <li>
        <strong>
          <%= v.name %>
        </strong>
        -
        <span>
          <%= v.star %>
        </span>
        <% }) %>
      </li>
 </ul>

第六步：按照需求修改app.js配置项

// 使用中间件：数据、静态资源
app.use(express.json());
app.use(express.urlencoded());
app.use(express.static('./public'));
// 引入路由
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var addRouter = require('./routes/add');
// 配置初始路径
app.use('/', indexRouter);
app.use('/', usersRouter);
app.use('/', addRouter);

添加数据功能就实现好啦！

最后编辑于：2020.10.22 17:27:17