Vue+Express+mysql(mongodb)+Vue全家桶架构

_DangJin 发布于2019-08-26 14:01 / 3419人阅读

摘要：项目目录序号对应代码参考后端接受请求的如果用的可以存放文件或者配置文件主要配置文件导出文件，执行语句前端发起请求文件静态资源文件组件图标前端路由状态

项目目录：

tips:序号对应代码参考

|-- build
|-- config
|-- server    //express 后端
        |-- api    //接受请求的API
        |-- data    //如果用的mongodb可以存放json data文件
            |-- data.json
        |-- db.js    //mongo或者sql配置文件 (1)
        |-- index.js    //express主要配置文件 (2)
        |-- mysqlDB.sql    //mysql导出文件
        |-- sqlMap.js    //sqlmap，mysql执行语句 (3)
|-- src
    |-- api    //前端发起请求api文件
        |-- get.js 
        |-- post.js 
    |-- assets    //静态资源文件
        |-- css.js
        |-- js.js
        |-- img.js
    |-- components //组件
    |-- icons    //icon图标
    |-- router    //前端路由
        |-- index.js
    |-- store    //vuex状态
        |-- modules
            |-- user.js
        |-- getters.js
        |-- index.js
    |-- utils    //工具文件
        |-- request.js
        |-- date.js
    |-- views    //前端主要显示.vue文件
    |-- App.vue
    |-- 
|-- static
    |-- css
    |-- icon
    |-- img
    |-- js
|-- test
|-- index.html
|-- package.json

代码参考

(1):db.js代码参考,mysql:

module.exports = {
    mysql: {
        host:"localhost",
    port:"3306",
    user:"LV",
    password:"123123",
    database:"LVShop",
    charset : "utf8mb4"
    }
}

(2):index.js代码参考：

let express = require("express");
let app = express();
let bodyParser = require("body-parser");
var mysql = require("mysql");
const db = require("./db.js")

//============  GET POST API ===============//
const mCustomerAPI = require("./api/manage/customer")

//============  GET POST API ===============//

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.use(function (req, res, next){
    if (req.url === "your_alipay_notify_url") {
      req.headers["content-type"] = "application/x-www-form-urlencoded";
    }
    next();
});

//断开连接后自动连接函数
function handleError (err) {
    if (err) {
      // 如果是连接断开，自动重新连接
      if (err.code === "PROTOCOL_CONNECTION_LOST") {
        connect();
      } else {
        console.error(err.stack || err);
      }
    }
}
//数据库连接
function connect () {
  var conn = mysql.createConnection(db.mysql);
  conn.connect(handleError);
  conn.on("error",handleError);
}
connect();
// 监听端口
let prot = 3002;
app.listen(prot,function(){   //监听3002端口
    console.log("Server running at "+prot+" port.........");
});

app.use(function(req,res,next){
    //只允许8080访问
     res.header("Access-Control-Allow-Origin","*");
    //服务允许客户端发的方法
    res.header("Access-Control-Allow-Methods","GET,POST,DELETE,PUT,OPTIONS");
    //服务器允许的请求头
    res.header("Access-Control-Allow-Headers","Content-Type,Accept,Authorization");
    //跨域携带cookie  允许客户端把cookie发过来
    res.header("Access-Control-Allow-Credentials","true");
    //如果请求的方法是OPTIONS,那么意味着客户端只要响应头，直接结束响应即可
    if(req.method == "OPTIONS"){
      res.end();
    }else{
      next();
    }
});

//请求接口
app.use(mCustomerAPI)

(3):sqlMap.js// sql语句

var sqlMap = {   
        customer:{
            add:"insert into `customer`(`username`,`password`,`telephone`,`permission`) values(?,?,?,?)"}
     }

云数据库MySQL 云数据库MongoDB Vue+Express Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109970.html

Vue+Express+mysql(mongodb)+Vue全家桶架构

摘要：项目目录序号对应代码参考后端接受请求的如果用的可以存放文件或者配置文件主要配置文件导出文件，执行语句前端发起请求文件静态资源文件组件图标前端路由状态项目目录： tips:序号对应代码参考 |-- build |-- config |-- server //express 后端 |-- api //接受请求的API |-- data /...

tinysun1234 2019-08-27 14:27 评论0 收藏0
项目开发

摘要：前端菜鸟项目，大佬们轻喷美团外卖项目演示地址第期分享推荐上好玩容易上手的项目，帮你找到编程的乐趣。包含支持冒泡的事件框架资源模块等组件，按需选择组件，不绑架开发者。基于 Vue 的 WebSocket 实时聊天实战项目一个基于vue的，从前端到后端构建的项目。能让学到如何用，用到了vue全家桶，nodejs，通过webpack打包，图灵机器人，websocket等前沿知识进行构建。...

elva 2019-08-05 12:53 评论0 收藏0
vue全家桶网易严选,体验网易严选购物流程

摘要：项目预览线上访问或者二维码扫描项目描述全家桶模仿网易严选浏览，购物流程，好的生活，没那么贵。对状态管理有了进一步的了解在项目过程中每一个组件都应用了这个组件，切换的时候每次当前选中的选项都是第一项成选中状态，究其原因的他们的状态没有共享。项目预览 showImg(https://segmentfault.com/img/remote/1460000009660678?w=1481&h...

alaege 2019-08-20 17:02 评论0 收藏0
Vue2.0全家桶仿腾讯课堂（移动端）

摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。效果预览 ?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试 ?源码地址：Github✨✨求你的小星星～...

zorro 2019-08-29 12:48 评论0 收藏0
Vue2.0全家桶仿腾讯课堂（移动端）

摘要：最近在学习觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正持续更新中。的使用的状态存储是响应式的。需要注意类似于，不同在于提交的是，而不是直接变更状态。最近在学习vue,觉得超好用，忍不住自己仿了个腾讯课堂练练手，不当之处还请大家指正（持续更新中）。效果预览 ?在线预览：点我！！！在线预览，手机浏览或切换浏览器移动调试 ?源码地址：Github✨✨求你的小星星～...

anquan 2019-08-01 17:01 评论0 收藏0