一 、 手 写 服 务 器 \color{blue}{一、手写服务器} 一、手写服务器
以下文件可以写一起,不过为了方便管理,建议分开写
1、创建api-server文件夹(文件夹名字随意,根据个人喜好)
(1).新建api-servers文件
const path = require("path")
const express = require("express")
const app = express()
const mongoose = require("mongoose")
const CartsModel = require("./mongodb/CartsModule")
app.use(express.static(path.resolve(__dirname,"../../")))
app.get("/",(req,res)=>{
res.sendFile(path.resolve(__dirname,"../../","index.html"))
})
app.get("/api/carts",(req,res)=>{
// res.header('Access-Control-Allow-Origin', '*'); //这个表示任意域名都可以访问,这样写不能携带cookie了。
res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); //这样写,只有www.baidu.com 可以访问。
res.header('Access-Control-Allow-Credentials', true); // 允许服务器端发送Cookie数据
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');//设置方法
CartsModel.findOne({"userid":2},(err,results)=>{
res.json(results)
})
})
// 监听
app.listen(666,(error)=>{
console.log("server is ready on port 666")
})
(2)新建mongodb文件夹
\qquad
①.新建数据库配置文件MongoConfig
const mongoose = require("mongoose")
const DbUrl = "mongodb://localhost:27017/myshop"
// 建立连接
mongoose.connect(DbUrl,{useNewUrlParser:true})
mongoose.connection.on("connected",(error)=>{
console.log("mongodb连接成功")
})
module.exports = mongoose
\qquad ②.新建模块文件,例如购物车模块
const mongoose = require("./MongoConfig")
const Schema = mongoose.Schema
let CartsSchema = new Schema({
"userid" : {type:Number},
"totalPrice" : {type:Number},
"checked" : {type:Boolean},
"shops":{type:Object}
})
let CartsModel = mongoose.model("carts",CartsSchema)
module.exports = CartsModel
2、创建apis文件夹(同上)
\qquad
创建接口文件,如购物车数据的接口文件(ShopCartsApi)
import {CARTURL} from "../commons/AjaxURLSchema"
export default {
// 通过用户的编号来获取carts信息
// @param: cb 返回的数据
getShopCartsInfoByUserId(cb){
fetch(CARTURL).then(res=>{
res.json().then(data=>{
cb(data)
})
})
}
}
3、创建commons文件夹(同上)
\qquad
创建类似于ajax效果的文件,用来连接端口传递数据(ajaxUrlSchema)
export const CARTURL = "http://localhost:666/api/carts"
4、在页面组件引入连接端口的文件
<script>
import ShopCartsApi from "../apis/ShopCartsApi"
import JdCartsHeader from "../components/JdCarts/JdCartsHeader";
import JdCartsShopList from "../components/JdCarts/JdCartsShopList";
import JdCartsFooter from "../components/JdCarts/JdCartsFooter";
export default {
name: "JdCarts",
components: {JdCartsFooter, JdCartsShopList, JdCartsHeader},
data(){
return {
totalPrice:0,
cartInfo:[],
checked:true
}
},
methods:{
// 初始化数据
_initData(){
ShopCartsApi.getShopCartsInfoByUserId(data=>{
this.cartInfo = data;
console.log(this.cartInfo)
this._counteCarts(data)
})
},
// 创建完成后调用初始化方法,获取数据
created(){
this._initData()
},
}
</script>
二 、 e x p r e s s 自 动 生 成 \color{blue}{二、express自动生成} 二、express自动生成
// 全局安装
npm install express -g
// 测试是否安装成功
express -h
// 安装如果出现问题,则运行
npm install express-generator -g
// 项目中安装express模块
npm install express --save-dev
或
者
直
接
拿
W
e
b
S
t
o
r
m
生
成
e
x
p
r
s
e
e
项
目
\color{red}{或者直接拿WebStorm生成exprsee项目}
或者直接拿WebStorm生成exprsee项目
生成结果:
(1).新建文件夹data用来存放数据,比如存放首页的数据建indexdata.js
(2).在文件夹routes中新建相应的js文件将indexdata.js引入,若存在跨域,加入以下代码:
// 这样写,表示任意域名都可以访问,这样写不能携带cookie了。
res.header('Access-Control-Allow-Origin', '*');
// 这样写,只有www.baidu.com 可以访问(可以根据自己情况改成自己的地址)
res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
// 允许服务器端发送Cookie数据
res.header('Access-Control-Allow-Credentials', true);
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
// 设置方法
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
(3).在views文件夹的app.js中引入在routes中新建的js文件
(4).后台与前端建立连接
\qquad
①.在脚手架文件中的src中新建commons文件夹,创建类似于ajax效果的文件,用来连接端口传递数据(ajaxUrlSchema)
// 默认端口号为3000
export const CARTURL = "http://localhost:3000/api/carts"
\qquad
②.在src文件夹下新建apis文件夹,用来获取数据
创建接口文件
例如 购物车数据的接口文件(ShopCartsApi)
import {CARTURL} from "../commons/AjaxURLSchema"
export default {
// 通过用户的编号来获取carts信息
// @param: cb 返回的数据
getShopCartsInfoByUserId(cb){
fetch(CARTURL).then(res=>{
res.json().then(data=>{
cb(data)
})
})
}
}
例如
import {indexURL} from '../commons/ajaxURLdata'
export default {
// 获取首页轮播图图片数据
// @param: cb 返回的数据
getSliderImg(calb){
fetch(indexURL).then(res=> {
res.json().then(data => {
calb(data)
})
})
},
}