express + vue +mysql 搭建项目 - 查问我看

转 vue框架大概要学多久(前端vue要学5天就会方法)

|-转 express + vue +mysql 搭建项目

PHPer 2022-10-23 524 0 1

项目有bug，前端老是报错，这个文章只是用来参考 20221024 0136

神膘护体小月半发布于 2021-09-15

创建目录

为了方便管理项目，创建根目录，内部分成两部分，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);
  });

如果能获取到数据，说明在本地搭建的数据视图互通的接口调试成功

...

浏览更多内容请先登录。 立即注册

JS, Vue

更新于：2022-10-24 01:37:03

您需要登录后才可以评论。立即注册

转 vue框架大概要学多久(前端vue要学5天就会方法)

|-转 express + vue +mysql 搭建项目

创建目录

搭建 express 框架

搭建 vue 框架

连接数据库

操作数据

7

1221

129w+

228

服务器搭建

WEB

个人爱好

游戏

linux

互联网

操作系统

mysql

Python

Yii2

php

WEB后端

网站建设

采集

WEB前端

Centos

经济

工具

生活

内容整理

数据库

资源

OS

电影

JS

常用命令

保险

php项目

问题整理

IT

网站

魔兽世界

composer

NodeJs

观点

AI

欧美电影

Yii扩展

美女

学习

LAMP

全文索引

Apache

前端

发现

Windows

Android

影评

服务器维护

国产电影

uwow

PHP框架

邮件服务器

评测

随笔

服务器

音乐

历史

推荐内容