关于express:express-vue-搭建项目

创立目录

• 为了方便管理我的项目，创立根目录，外部分成两局部，server 和 view
• server 用来搭建 express 框架
• view 用来搭建 vue 框架

搭建 express 框架

• 全局装置 express 脚手架，并检测是否装置胜利

npm install express-generator -g

• 检测是否装置胜利

express --version

• 在 server 文件夹中创立 express 我的项目

express 项目名称 

• 目录构造

  • bin 目录下的 www 文件用来启动我的项目
  • public 目录用来寄存动态文件
  • router 目录用来寄存路由文件，对应资源和引入门路的问题
  • view 目录用来寄存模板引擎文件
  • app.js 文件是整个我的项目的入口文件

• 装置依赖、启动我的项目

npm install
npm start

• 默认拜访 localhost:3000
• 如果呈现上面的内容，阐明启动胜利

• 初始化的脚手架中，router 目录下存在 user.js，用来退出本人的接口内容

router.get('/', function(req, res, next) {res.send('respond with a resource');
});

• 在根目录 app.js 中，无关 user.js 的配置为

var usersRouter = require('./routes/users');
 
app.use('/users', usersRouter);

• 此时在浏览器中拜访路由 users，如果呈现 respond with a resource 阐明脚手架搭建胜利

搭建 vue 框架

• 全局装置脚手架

npm install -g @vue/cli

• 检测是否装置胜利

vue -V

• 在 view 文件夹中创立 vue 我的项目

vue create 项目名称 

• 目录构造

  • assess 目录用来寄存动态文件
  • components 目录用来寄存公共组件
  • App.vue 根组件
  • main.js 我的项目入口

• 设置跨域

  • express 我的项目默认在 3000 端口启动，所以视图层的 vue 框架中须要设置跨域

 devServer: {
    host: 'localhost',
    port: 8000,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {"/api": ""}
      }
    },
 
  },

• 启动我的项目

npm install
npm run serve

连贯数据库

• express 我的项目中新建文件夹 modules 用来寄存模块化设置的文件
• modules 文件夹中新建 handel.js 对数据进行解决的模块封装

// 引入 mysql
var mysql = require('mysql')
// 引入 mysql 连贯配置
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'testdata'
});
var userData = {
  // 查问所有数据
  queryAll: function (req, res, next) {
    let queryAll = 'SELECT * FROM userdata'
    connection.query(queryAll, function (err, result) {if (result != '') {
        res.json({
          code: '200',
          msg: '全副查找胜利',
          data: result
        })
      } else {
        res.json({
          code: '1',
          msg: '操作失败'
        })
      }
    })
  },
}
module.exports = userData

• routes 文件夹中的 index.js 封装接口

var express = require('express');
var router = express.Router();
 
// 引入本人封装的连贯
var user = require('../modules/handel')
 
/* GET home page. */
router.get('/', function (req, res, next) {res.render('index', { title: 'Express'});
});
 
router.get('/queryAll', function (req, res, next) {user.queryAll(req, res, next)
})
 
module.exports = router;

操作数据

• 在 vue 中应用

axios
  .get("/api/queryAll")
  .then((res) => {console.log("获取 res", res);
  })
  .catch((err) => {console.log("获取报错", err);
  });

• 如果能获取到数据，阐明在本地搭建的数据视图互通的接口调试胜利

残缺案例

express + vue 搭建我的项目，实现数据的增删改查 -testsql