node.js具体项目搭建步骤

野性酷女 2023-10-10 09:39 22阅读 0赞

## 生成后台目录结构并安装热更新 ##

### 生成目录结构 ###

##### 1. 安装目录生成器： #####

npm install express-generator -g

##### 2. 生成一个文件夹： #####

express 文件夹名 --view=pug

##### 3. 进入到文件夹下安装依赖： #####

cd 文件夹名
    npm install

> ⚠️此目录结构没有models文件夹，需要自己创建

### 安装热更新 ###

### nodemon简介 ###

*  在开发的时候，每次修改文件，都需要重启 express 服务，比较麻烦。使用nodemon，修改文件后可以自动重启 express 服务。

##### 1. 安装： #####

npm install --save-dev nodemon

##### 2. 配置package.json的内容： #####

"scripts": {
        "start": "node ./bin/www",
        "devstart": "nodemon ./bin/www"
      }

### 端口配置 ###

默认端口是3000，如要修改，打开bin/www

var port = normalizePort(process.env.PORT || '3000');
    app.set('port', port);

### app.js配置 ###

引入数据库，引入routes模块，使用路由，连接数据库

### 使用`npm run devstart`命令启动服务 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]

### 在models文件夹下创建employee.js ###

//员工
    
    let mongoose = require('mongoose');
    var Schema = mongoose.Schema;
    
    var employee = new Schema({
        "name": String,
        "department_id": mongoose.Types.ObjectId,
        "workplace": String,
        "tel": Number
    });
    module.exports = mongoose.model("employee", employee)

### 在数据库中创建employee集合（可视化界面操作更简单） ###

### 在routes文件夹下创建employee.js ###

### 前端部分 ###

getEmployees() {
         		 this.$axios.get("/api/salaryStructure/employeeStock").then(res => {
            		for (const iterator of res.data.result) {
             		 this.items.push(iterator);
            		}
           		 this.items.unshift("全部");
           		 this.desserts = res.data.result;
         			 });
      				  },
        ```
         这里的api是在vue.config.js里配置好的

module.exports = {
    	// 修改的配置
     // 将baseUrl: '/api',改为baseUrl: '/',
     publicPath: '/',
    	lintOnSave: false,
    	devServer: {
            proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                  '^/api': ''
                }
            }
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190924170338644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzE3NjMzNw==,size_16,color_FFFFFF,t_70