摘要:項目目錄序號對應代碼參考后端接受請求的如果用的可以存放文件或者配置文件主要配置文件導出文件,執行語句前端發起請求文件靜態資源文件組件圖標前端路由狀態
項目目錄:
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(?,?,?,?)"}
}
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.hztianpu.com/yun/109970.html
摘要:項目預覽線上訪問或者二維碼掃描項目描述全家桶模仿網易嚴選瀏覽,購物流程,好的生活,沒那么貴。對狀態管理有了進一步的了解在項目過程中每一個組件都應用了這個組件,切換的時候每次當前選中的選項都是第一項成選中狀態,究其原因的他們的狀態沒有共享。 項目預覽 showImg(https://segmentfault.com/img/remote/1460000009660678?w=1481&h...
摘要:最近在學習覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于,不同在于提交的是,而不是直接變更狀態。 最近在學習vue,覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正(持續更新中)。 效果預覽 ?在線預覽:點我!!!在線預覽,手機瀏覽或切換瀏覽器移動調試 ?源碼地址:Github??求你的小星星~...
摘要:最近在學習覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正持續更新中。的使用的狀態存儲是響應式的。需要注意類似于,不同在于提交的是,而不是直接變更狀態。 最近在學習vue,覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正(持續更新中)。 效果預覽 ?在線預覽:點我!!!在線預覽,手機瀏覽或切換瀏覽器移動調試 ?源碼地址:Github??求你的小星星~...
閱讀 2833·2023-04-25 19:27
閱讀 3741·2021-11-24 09:39
閱讀 4115·2021-10-08 10:17
閱讀 3621·2019-08-30 13:48
閱讀 2253·2019-08-29 12:26
閱讀 3356·2019-08-28 17:52
閱讀 3743·2019-08-26 14:01
閱讀 3749·2019-08-26 12:19