在学习前端的过程中，最开始我们需要展示在页面上的数据都是写死在系统里的假数据。然而，实际上前端是要与后台服务器交互进行数据存取的。如何搭建服务器见下文。

一、使用Node.js+express用命令行搭建服务器

目前我们还为涉及到写数据的问题，我们希望实现从服务器中读取数据，那么我们首先需要搭建一台服务器。

搭建服务器的过程分以下三步。

①安装node.js

②安装express

npm install -g express -generator //全局安装express命令安装工具

npm install -g express //安装express框架

③构建项目

cd 目录

express name -e

npm install //安装组件

④启动服务器

npm start //启动项目（服务器）

在前端未与服务器进行通信时，我们的数据都存在于static中的mock文件夹下。

mock数据

在我们使用node+express搭建了服务器之后，可以把文件放在public文件夹下。

服务器数据

那么在读取服务器数据时，程序中也要做相应的改动。

二、解决express的跨域问题，连接前端与服务器

修改前端代码：将前端vue文件中所有发送axios请求的地方设为服务器IP地址和相应端口

methods:{

getCityInfo () {

// 发送axios请求，请求地址在括号里

axios.get('http:/**.**.**.**:3000/city.json')

.then(this.handleGetCityInfoSucc)

},

修改服务器代码以解决express的跨域问题（利用cors）:

① cmd>>

npm install cors --save

②在app.js中加入代码

var cors=require('cors');

app.use(cors({

origin:['http://localhost:8080'], //指定接收的地址，将localhost改成前端IP地址

methods:['GET','POST'], //指定接收的请求类型

alloweHeaders:['Content-Type','Authorization'] //指定header

}))

最后分别运行服务器和前端即可进行数据交换。

运行服务器

cd 目录

npm start

运行前端程序

cd 目录

npm run dev

二、更改express默认端口号

express默认端口号是3000，找到Express 项目的根目录下的 \bin\www 文件，需要更改端口号可以在下图位置更改

var port = normalizePort(process.env.PORT || '10006');