一个从0开始的Vue项目（mysql+node+express+vue）第一天：搭建开发环境

这是一个vue项目的服务端

第一天：搭建开发环境 使用node+express+mysql

步骤：
- 1：首先安装express 没什么好说的
- 2：新建一个app.js用于项目入口 内部监听3000端口号
- 3：由于我们前端端口号是8080，所以这里涉及到跨域需要配置请求的header

app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:8080"); //为了跨域保持session，所以指定地址，不能用*
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

这是Vue项目的前端：

第一天：搭建开发环境（主要使用vue-cli）

步骤：
- 1 创建vue项目 全局安装vue-cli （npm install vue-cli -g）
- 2 使用vue init webpack vueclient
- 3 进入项目 安装依赖的包 npm install
- 4 使用npm run dev 检查项目是否允许成功

开发login首页

步骤：
- 1 在src/components中新建login.vue

    <template>
      <div class="backlogin">
        <div class="login_box">
          <div class="title">后台登录</div>
            <div>
              <input class="myinput" type="text" placeholder="手机号/用户名" v-model="username" />
            </div>
          <div>
            <input @keyup.13="login" class="myinput" type="password" placeholder="口令" v-model="password" />
          </div>
          <div class="login_other">
            <a href="javascript:;">找回密码</a>
            <input type="checkbox" id="remenberme" />
            <label for="remenberme">记住我</label>
          </div>
          <button :disabled="disablebtn" class="login" @click="login">{{loginText}}</button>
        </div>
      </div>
    </template>
    <script>
  import {
    Toast
  } from 'mint-ui';
  export default {
    name: 'backlogin',
    data() {
      return {
        username: "admin",
        password: "123456",
        disablebtn: false,
        loginText: "登录"
      }
    },
    methods: {
      login() {
        var vm = this;
        this.disablebtn = true;
        this.loginText = "登陆中";
        this.$reqs.post('/users/login', {
          username: this.username,
          password: this.password
        }).then(function (res) {
          if (res.data.status === true) {
            vm.$router.replace('/home');
          } else {
            //弹窗
            Toast({
              message: res.data.errMsg,
            });
            vm.disablebtn = false;
            vm.loginText = "登陆";
          }
        }).catch(function (err) {
          vm.disablebtn = false;
          vm.loginText = "登陆";
        })
      }
    }
  }
</script>
<style scope>
    //剩下的样式大家自由发挥
</style>

• 2 在main.js入口函数中引入axios并配置

  import axios from 'axios'
  axios.defaults.withCredentials=true;  //跨域保存session有用
  axios.defaults.baseURL="http://localhost:3000";
  Vue.prototype.$reqs=axios;

• 3 在router中的index.js中配置路由

  import Vue from 'vue'  
  import Router from 'vue-router'  
  import login from '@/components/login' //加载组件login
  Vue.use(Router)
  export default new Router({
  routes: [
     {
       path: '/',
       component: login
     }
    ]
  })

  写在结尾处：其实第一天的开发环境搭建最主要的就是解决
  客户端：http://localhost:8080/
  和服务端:http://localhost:3000/的跨域问题
  在客户端配置一下axios（在main函数中加入以下代码）

//配置axios 实现跨域请求3000端口下的node服务器
import axios from 'axios'
axios.defaults.withCredentials = true; //跨域保存session有用
axios.defaults.baseURL = "http://localhost:3000";
Vue.prototype.$reqs = axios;

在服务端的配置见上文~ 解决了跨域，剩下的大部分都是常规操作了~

项目前端代码详见：项目前端代码
项目后端代码详见：项目后端代码