综合实训-----前端、服务器端框架总结

前端

1、element框架官网：链接

作用：写前端的框架

安装
npm i element-ui -S
man.js注册
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2、express框架官网：链接

作用：主要写在js文件，实现将本地图片等文件传到服务器端

安装

npm install express --save

start.js代码

const express=require('express');
const httpServer=new express();

const banner=require('./config/banner.json');
const shopitem=require('./config/shopitem.json');

httpServer.use(express.static("resource"));

httpServer.all("*",function(req,res,next){
    res.header("Access-Control-Allow-Origin","*");
    next();
})

httpServer.get('/getBannerImg',function(req,res){ //打包发送到服务器
    res.send({code:0,message:banner})
});


httpServer.get('/getShopItem',function(req,res){ //打包发送到服务器
    res.send({code:0,message:shopitem})
});




httpServer.get('/',function(req,res){
    res.send('helloword1')
});



httpServer.listen(9999);//设置端口号

工程截图

3、axios框架官网：链接

作用：用于vue文件的连接服务器的框架

安装
npm install axios
main.js配置
const axios=require('axios');
Vue.prototype.$axios=axios;

4.mangoDB 链接

作用：基于分布式文件存储的数据库

这里我们用Studio 3T 编辑我们的MangoDB数据库

启动mangoDB：
C:\mongodb\bin\mongod --dbpath c:\data\db
一定要在mangodb安装目录的bin路径运行

mongod --dbpath C:\data\db

这个C:\data\db 就是你想让这个数据保存在哪个文件下的路径，可以自定义路径

这个自定义路径最好放在跟MangoDB一个文件下比如 D:\MongoDB\data\db

启动成功：

5、cmd创建带有路由router的vue项目

1、进入你想要项目文件的地址 在地址框上输入cmd 运行
2、vue create 项目名  （注意项目名不能有大写）
3、接着选择manually select feature
4、用空格进行选择 选择Bable Router 其他的取消选择
5、选择n
6、选择package.json
7、选择y

综合实训-----前端、服务器端框架总结

猜你喜欢