项目名称：顶楼人员管理
简介：博主我酷爱韩剧顶楼，利用所学知识，创建一个顶楼人员管理系统。
功能：登录界面、注册界面、首页、普通用户管理页、顶楼用户管理页
技术：采用前后端分离技术开发运行。
下面开始进入正题：
一、环境搭建：
1.创建一个文件夹，并给项目文件夹命名Attic。
2.在终端上运行 npm i -g @vue/cli?命令。
3.在终端上运行?vue create attic?命令，创建Vue项目名称。
4.手动配置一下Vue项目。（谁让博主我这么细心呢，下图是手动配置要选的东西）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
5.在项目根目录(也就是新项目的名字attic)上创建vue.config.js配置文件。
（左边是代码，可以复制走，右边是图片效果）
| module.exports?=?{ ????devServer:?{ ????????port:?8888,?//端口号 ????????host:?"localhost",?//主机名称 ????????https:?false,?//是否使用https协议 ????????open:?true,?//启动服务之后是否主动打开浏览器 ????}, ????productionSourceMap:?false,?//打包完成，不生成.map文件 ????lintOnSave:?false?//关闭语法监测 } |  |
?6.启动服务器，运行npm i serve?命令。
7.安装一些插件：在终端上运行?下面几条 命令。
npm i -S axios
npm i -S pubsub-js
npm i -S element-ui
8.在src文件下找到main.js文件，引入下面两行代码：（引入位置如右图）
| import?ElementUI?from?'element-ui'; import?'element-ui/lib/theme-chalk/index.css'; |  |
?9.下载插件：element?UI?Snippets
?10.测试下项目，终端上运行npm run serve?命令。
11.在src文件夹下，新建一个utils文件夹，在utils文件夹下新建一个request.js文件，并配置代码。
| import?axios?from?"axios" const?request?=?axios.create({ ????baseURL:?'/', ????timeout:?5000 }) export?default?request |  |
?12.在public文件下创建db.json文件，用来存放假数据。（妈呀，我发现了什么，这不比我刚才弄得先进！丢人）
[{
"name": "朱蛋挞",
"age": 40
}, {
"name": "申秀莲",
"age": 37
}, {
"name": "千瑞珍",
"age": 37
}]?13.去主页面（就是大图标大V那页）看看，localhost:8888/db.json,能不能访问到。
14.在src文件夹下，新建一个api文件夹，在api文件夹下新建一个test.js文件，并配置代码
import request from "@/utils/request.js";
const BASE_URL = "http://localhost:8888"
export default {
getList() {
let req = request({
url: BASE_URL + "/db.json",
method: "get"
})
return req
}
}15.找到Helloworld.vue文件，配置如下代码。
<script>
import testApi from "@/api/test.js"
export default {
name: "HelloWorld",
props: {
msg: String,
}, created () {
this.fetchData()
},methods: {
fetchData(){
testApi.getList().then(res=>{
console.log("测试",res.data);
this.List=res.data
}).catch(err=>{
console.log("Err",err);
})
}
}
,data(){
return{
List:[]
}
}
};
</script>16.在template标签下找个地方添加{{List}}
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
{{List}}
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
>vue-cli documentation</a
>.
</p>
<h3>Installed CLI Plugins</h3>
</div>
</template>
17.在Attic文件夹下复制attic文件夹下的文件，除了node_modules文件夹和.git文件夹，并命名为atticup(用来当作后端)。
18.在终端上运行 npm i?命令下载所有插件，?为了与后端传入的数据有所区别 这时我们在db.json文件中更改一下数据，比如原来"name":"小孩""name":"小孩1111"。
19.在后端，找到vue.config.js文件，将后台端口号port改成8001，并启动后台服务器，npm run serve.
20.去主页面（就是大图标大V那页）看看，localhost:8001/db.json,能不能访问到。
21.回到前端，也就是原来的项目文件，启动前台服务器npm run serve.
22.现在要实现：前端访问后端的数据，所以要到前端的test.js文件在把端口号改为8001
const BASE_URL = "http://localhost:8001"23.启动前台服务器npm run serve，此时产生一个跨域问题，那么就得解决，不然后面的剧情怎么写！！
24.代理服务器来解决跨域问题，在前端，找到vue.config.js文件，新增proxy代码：
module.exports = {
devServer: {
port: 8888, //端口号
host: "localhost", //主机名称
https: false, //是否使用https协议
open: true, //启动服务之后是否主动打开浏览器
proxy: {
'/dev-api': { //监测地址中的路径
target: "http://localhost:8001", //去往哪里
changOrigin: true, //用来开启代理服务器的
pathRewrite: {
'/dev-api': ""
}
}
}
},
productionSourceMap: false, //打包完成，不生成.map文件
lintOnSave: false //关闭语法监测
}25.在前端，找到test.js文件,更改如下代码：
const BASE_URL = "/dev-api"26.在前端，重启前端服务器，运行npm run serve命令。
27.此时，前端能访问到后端的数据，但是这是开发环境的数据，想访问生产环境怎么办呢，接下来，来配置环境变量。
28，在前端，根目录下，新建一个环境变量文件，命名为.env.development文件，再新建一个环境变量文件，命名为.env.production文件。
29.在前端，.env.development文件里配置下面代码：
VUE_APP_BASE_API="/dev-api"
VUE_APP_SERVICE_URL="http://localhost:8001"30.在前端，.env.production文件里配置下面代码：
VUE_APP_BASE_API="/pro-api"31.在前端，vue.config.js文件proxy换成下面代码：
proxy: {
[process.env.VUE_APP_BASE_API]: { //监测地址中的路径
target: process.env.VUE_APP_SERVICE_URL, //去往哪里
changOrigin: true, //用来开启代理服务器的
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
}
}32.在前端,test.js文件更改如下代码：
const BASE_URL = ""33.在前端,request.js文件更改如下代码：
baseURL: process.env.VUE_APP_BASE_API,34.现在，怎么知道是开发环境还是生产环境呢，回到前端的main.js文件，更改如下代码：
Vue.config.productionTip = process.env.NODE_ENV == "production";总结：先创建一个Vue项目，然后用axios获取一下路径和请求方式，然后利用{{}}把假数据渲染到
页面上，前端端口号是8888，后端端口号是8001，然后实现前端访问后端的数据，产生了跨域，用代理服务器来解决跨域问题，此时，前端能访问到后端的数据，但是这是开发环境的数据，想访问生产环境怎么办呢，接下来，来配置环境变量，用.env.development文件和.env.production文件，现在，怎么知道是开发环境还是生产环境，用它！！！，来不及解释了，我憋不住了：Vue.config.productionTip?=?process.env.NODE_ENV?==?"production";