一个从0开始的Vue项目(mysql+node+express+vue)第一天:搭建开发环境
这是一个vue项目的服务端第一天:搭建开发环境 使用node+express+mysql步骤:- 1:首先安装express 没什么好说的- 2:新建一个app.js用于项目入口 内部监听3000端口号- 3:由于我们前端端口号是8080,所以这里涉及到跨域需要配置请求的headerapp.all('*', function (req, res, next) {...
·
这是一个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;
在服务端的配置见上文~ 解决了跨域,剩下的大部分都是常规操作了~
更多推荐
已为社区贡献3条内容
所有评论(0)