1、ngnix使用
登陆https://nginx.org
找到最新的stable版本，稳定版本，也就是开发版本
踩坑记录 因为之前安装了XAMPP（Apache+MySQL+PHP+PERL），导致localhost端口被占，所以点击niginx总是闪屏，去xampp找到xampp-control文件，stop服务。
2、vue element安装 npm i element-ui -s
3、express后台安装 npm i express@next mongoose cors 安装后端mongodb是非关系类数据库（不是表） cors是vue解决跨域插件
4、后台自动更新启动 node server/index.js 手动启动后端，但是代码修改后还需手动启动；一般都是全局安装 npm i nodemon -g，实现自动更新
nodemon server 这样nodejs会自动取找index
5、后台安装过程express框架
npm install expreess-generator -g
express --view=ejs server 一级目录下安装server文件夹
进server文件夹 安装依赖 npm install
npm start 启动服务
6、连接数据库
后台server文件夹下创建db文件夹，里面创sql.js文件
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',//账号
password : '',//密码
database : 'test'//哪一个库
});
module.exports = connection;
在后台server文件夹下的routes文件夹下的index.js中加入
var connection = require("../db/sql");
router.get('/list', function(req, res, next) {
// res.json({
// a:1,
// b:3
// });
connection.query("select * from class",function(error, results, fields) {
console.log(results);
res.json(results);
});
});
7、解决跨越问题
& 安装cors插件 npm install cors
&vue中设置代理
cli2是在config文件夹中index.js文件中
cl3是在一级目录建一个vue.config.js文件夹
module.exports = {
dev: {
proxyTable: {
'/api':{
target:"http://localhost:3000",//3000后不要加/
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
vue官网有详细解释
& no-console错误，去package.js中加:
"rules":{
"no-console":0
}
8.apache建立数据库
打开apache的xampp地址，启动xampp_start
打开默认端口 localhost,点击phpAdmn
点击 新建数据库，语言选择utf8_general_ci (utf8全球通用语言)
mysql增删查语句回忆:
增: insert 库名 表名 (字段1，字段2，字段3) values (参数1，参数2，参数3) //有时候 字段1 要写成`字段1`，tab键的这个`/参数则可以写成"参数1"，常用的"
查: select * from 库名 表名 where 1 //*表示所有字段 ；where 1条件永远为true
select `字段1`，`字段2 `,`字段3` from 库名 表名 where `id` > 3 // 查询具体字段，where 具体条件
select * from 库名 表名 where 1 limit 3,10 从第3个开始查，每页显示10个
改: update 库名 字段名 set `name` = 'superman' where id = 1 // 将id为1的name改为'superman' ,where 为条件
删: delete from 库名 表名 wher 'id' = 1 //删除 id 为1 的数据行
9整体过程
初始化前端 npm init 项目
按照对应插件 npm install express mysql body-parser cors --save //body-parser 是为了取得前端的值req.body
后端创建3个文件（实现作用即可）
db文件下index.js 进行mysql相关配置
后端文件夹server 的 index.js实现后台入口文件
router.js相关路由文件
10.使用创建的axios实例并设定接口地址
前端main.js中
Vue.prototype.$http = axios.create({
baseURL:"http://localhost:3000/"
})