预备知识(备查)：
1）element-ui使用手册
2）springboot+jpa
3 ) axios
4）moment中文站
目标
本章制作前后端分离的项目，前后端实现跨域访问
- 注册功能开发
项目位置
前台vue：d:\vue\springboot-vue
后台spring-boot:D:\springboot\demo-jpa1
框架选择
前端框架选择element-ui
跨域请求选择axios
第一步：新建工程springboot-vue，并导入常用的包
1.1 d:\vue进入命令行状态,输入以下命令
vue init webpack springboot-vue
1.2 进入d:\vue\springboot-vue目录，输入以入命令
npm install
npm install
cnpm install vue-router vue-resource --save
npm install element-ui -S
npm install --save vue-axios
1.3 确认是否安装成功(axios同理)
查看配置文件package.json，是否有element-ui组件的版本号 如下图：
在node_modules中可以看到 element-ui的文件夹 ，所有安装的源文件可以在这里面找到
第二步 编码
在main.js文件中引入 element 组件
以下步骤皆可查看element手册
step 1 引入
引入方式有两种 1）完整引入 2）按需引入 初学者可以选择完整引入，以后熟练了再按需引入
完整引入
在 main.js 中写入以下内容：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
注意，如有与原有引入重复的，要出重复。比如vue,app就不需要重复引入
国际化
Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
// 设置语言
locale.use(lang)
经过上述两步，完成了element-ui的引入
axios引入略，直接上main.js完整代码
第三步：前台工程编码vue：d:\vue\springboot-vue
1）main.js完整的代码如下
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'
//以下4行引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.withCredentials = false//这个默认即为false，如果改为true，可以传递session信息，后端要做相应修改来放行，
Vue.prototype.$axios = axios; //在vue中使用axios
// 设置语言
locale.use(lang)
Vue.use(ElementUI);
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
render: h => h(App)
});
2）编写注册页面ElMain.vue
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年令">
<el-input v-model="form.age"></el-input>
</el-form-item>
</el-form-item>
<el-form-item label="生日">
<el-input v-model="form.birthday"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateForm(form)">save</el-button>
<el-button :plain="true" type="danger" v-on:click="canclemodal">Cancel</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
//这行必须加，否则不能根据名字引用
name: 'ElMain',
data() {
return {
form: {
name: '',
age: '',
birthday:'',
}
}
},
methods: {
updateForm: function(formName) {
let itemId = formName.id;
let name = formName.name;
let age = formName.age;
this.$axios.post('http://localhost:8000/haha/person/add',this.form,{
headers: {
'Content-Type':'application/json;charset=UTF-8'
}
}).then((response) =>{
// console.log(response);
alert(response.data);
this.reload();
//this.$router.push({path:'/notice'});
}).catch((response) =>{
this.$message.console.error('提交失败');
})
//location.reload();
},
canclemodal: function() {
this.$emit('canclemodal');
}
}
}
</script>
3）路由文件router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import ElMain from '@/components/ElMain'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'ElMain',
component: ElMain
}
]
})
第四步：后台spring-boot:D:\springboot\demo-jpa1
1）主配置文件中增加跨域权限配置SpringConfig.java内容如下
package com.neuedu.demo.config;
import static org.springframework.web.cors.CorsConfiguration.ALL;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
@ComponentScan(basePackages={"com.neuedu.demo"})
public class SpringConfig {
//增加跨域权限配置
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 限制了路径和域名的访问
/*registry.addMapping("/api*").allowedOrigins("http://localhost:8081");*/
registry.addMapping("/**")
.allowedOrigins(ALL)
.allowedMethods(ALL)
.allowedHeaders(ALL)
.allowCredentials(true);
}
};
}
}
2）PersonController
@RestController
@RequestMapping(value = "/person")
public class PersonController {
@Autowired
private PersonRepository personRepository;
@RequestMapping(path = "/add")
@ResponseBody
public String add(@RequestBody Person person) {
System.out.println("存库方法被调用");
personRepository.save(person);
return "success";
}
...
}
测试
npm run dev
启动服务，浏览器输入
http://localhost:8080/
image.png
点击save按钮，显示成功
image.png
日期显示形式改造
上面的表单生日需要手动填写，用户体验差。接下来用element-ui 的date控制进行改造
-
引入moment.js
进行D:\vue\springboot-vue目录，命令行状态执行npm install moment --save -
main.js中引入日期格式化组件
import moment from 'moment'; Vue.prototype.$moment = moment; //在vue中使用moment -
改造原日期输入项 ElMain.vue
<template> <el-form ref="form" :model="form" label-width="80px"> ...... //日期选择框 <el-form-item label="生日"> <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker> </el-form-item> ...... </el-form> </template> <script> export default { ...... methods: { updateForm: function(formName) { //以下两行进行日期格式化 let date = formName.birthday; this.form.birthday = this.$moment(date).format("YYYY-MM-DD"); this.$axios.post('http://localhost:8000/haha/person/add', this.form, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) ...... } } </script>
再测试
image.png
OK!
网友评论