前端项目Vue(下)
启动vue项目:npm run dev
1.配置router下的index.js文件(相当于配置URL)
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/hello',
name: '',
component: HelloWorld
},
{
path: '/',
name: '',
component: Index
}
]
})
2.在components下创建组件
2.1开启跨域
此时由于跨域的问题访问不到后端的数据,一共有三种方式
-
后端controller层中添加注解@CrossOrigin // 同源策略,可以实现后端解决跨域的问题 不推荐
-
前端在config.index.js文件中开启跨域
proxyTable: { '/api':{ target: 'http://localhost:8888/', changeOrigin: true, // 开启跨域 pathRewrite: { '^/api': "/" } } },
-
使用Nginx解决跨域问题
2.2通过ajax的方式在组件中异步请求数据
- 原生ajax请求数据
- jquery的ajax获取数据
- vue的ajax获取数据
- 安装axios和vue-axios 安装命令:npm install axios 与 npm insatll vue-axios
- 在main.js中引入,在项目模块中使用模板
- 在Index.vue中引入axios模板
Index.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>{{users}}</p>
<!-- <input type="button" @click="clickme()" value="click me">-->
</div>
</template>
<script>
// 3.引入axios模板
import axios from 'axios'
export default {
name: 'users',
data () {
return {
msg: 'this is all users',
users: []
}
},
methods:{
getAllUsers:function () {
//一、原生ajax获取后端数据
// var xhr = new XMLHttpRequest();
//
// xhr.open("GET", "api/user/getAll", true);
//
// xhr.send();
//
// var _this = this;
//
// xhr.onreadystatechange = function (){
// if(xhr.status == 200 && xhr.readyState == 4){
// alert(xhr.responseText)
//
// _this.users = eval(xhr.responseText);
// }
// }
//二、vue的ajax异步获取后端数据
// 1.安装axios和vue-axios
// 2.在main.js中引入,在项目模块中使用模板
var _this = this;
axios.get("api/user/getAll").then(res => {
console.log(res.data);
_this.users = res.data;
})
//
}
},
mounted() {
this.getAllUsers();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
实现效果
3.使用Element组件模板美化页面
官网:https://element.eleme.io/#/zh-CN/component/menu
安装Element:npm i element-ui -S
在main.js中进行配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
套用组件模板美化页面
<template>
<el-table
:data="users"
border
style="width: 100%">
<el-table-column
fixed
prop="id"
label="用户id"
width="150">
</el-table-column>
<el-table-column
prop="username"
label="用户名"
width="120">
</el-table-column>
<el-table-column
prop="password"
label="密码"
width="120">
</el-table-column>
<el-table-column
prop="nickname"
label="昵称"
width="120">
</el-table-column>
<el-table-column
prop="phone"
label="电话"
width="300">
</el-table-column>
<el-table-column
prop="picture"
label="头像"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
// 3.引入axios模板
import axios from 'axios'
export default {
name: 'users',
data () {
return {
users: []
}
},
methods:{
getAllUsers:function () {
//二、vue的ajax异步获取后端数据
// 1.安装axios和vue-axios
// 2.在main.js中引入,在项目模块中使用模板
var abc = this;
axios.get("api/user/getAll").then(res => {
console.log(res.data);
abc.users = res.data;
})
}
},
mounted() {
this.getAllUsers();
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果
点击查看进入详情修改页
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
//点击查看获取id 传递给修改组件
handleClick(row) {
alert(row.id);
console.log(row);
this.$router.push({name:"UpdateUser",params: {id:row.id}});
}
UpdateUser.vue
注意:方法methods不是method否则报错
<template>
<el-form :label-position="labelPosition" label-width="80px" :model="user">
<el-form-item label="用户id">
<el-input v-model="user.id"></el-input>
</el-form-item>
<el-form-item label="用户名">
<el-input v-model="user.username"></el-input>
</el-form-item>
<el-form-item label="用户密码">
<el-input v-model="user.password"></el-input>
</el-form-item>
<el-form-item label="盐值">
<el-input v-model="user.salt"></el-input>
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="user.nickname"></el-input>
</el-form-item>
<el-form-item label="电话">
<el-input v-model="user.phone"></el-input>
</el-form-item>
<el-form-item label="头像">
<el-input v-model="user.picture"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-input v-model="user.sex"></el-input>
</el-form-item>
<el-form-item label="状态">
<el-input v-model="user.status"></el-input>
</el-form-item>
<input type="button" value="修改" @click="update()" /><p/>
</el-form>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
labelPosition: 'right',
user: {}
}
},
//注意:这里是methods
methods:{
//通过id异步获取User对象
getUserId: function (id){
var abc = this;
axios.get("api/user/" + id).then(res => {
// alert(res.data);
abc.user = res.data;
});
},
//点击修改按钮,异步修改信息
update:function (){
// alert(123);
var abc = this;
console.log(abc.user);
axios.post("api/user/saveUser", abc.user).then(res => {
alert(res.data)
})
}
},
//钩子函数,通过传递的id 加载getUserId(id)函数
mounted() {
alert(this.$route.params.id)
this.getUserId(this.$route.params.id);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果