预备知识(备查)：
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目录，输入以入命令
cnpm install
cnpm install vue-router vue-resource --save
cnpm install element-ui -S
cnpm install axios --save
cnpm install --save vue-axios
cnpm install qs
1.3 确认是否安装成功(axios同理)
查看配置文件package.json，是否有element-ui组件的版本号 如下图：
在node_modules中可以看到 element-ui的文件夹 ，所有安装的源文件可以在这里面找到
第二步 编码
参考官网：https://element.eleme.cn/#/zh-CN/component/quickstart
在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)
});
引用qs
import qs from 'qs';
Vue.prototype.$qs = qs;
2）编写注册页面Register.vue
https://element.eleme.cn/#/zh-CN/component/form
页面里找到如下表单，
image.png
在src目录下新建reg目录
后在目录下新建Register.vue文件
拷贝element-ui对应页面的内容到Register.vue里
如图：
image.png
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: 'HelloWorld',
component: HelloWorld
},
{
path: '/reg',
name: 'Register',
component: Register
}
]
})
启动并测试：
npm run dev
http://localhost:8081/#/reg
image.png
继续完成界面开发
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="userName">
<el-input v-model="ruleForm.userName"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="真实姓名" prop="realName">
<el-input v-model="ruleForm.realName"></el-input>
</el-form-item>
<el-form-item label="用户类别" prop="useType">
<el-select v-model="ruleForm.useType" placeholder="请选择用户类别">
<el-option label="医院管理员" value="1"></el-option>
<el-option label="挂号收费员" value="2"></el-option>
<el-option label="门诊医生" value="3"></el-option>
<el-option label="医技医生" value="4"></el-option>
<el-option label="药房操作员" value="5"></el-option>
<el-option label="财务管理员" value="6"></el-option>
</el-select>
</el-form-item>
<el-form-item label="医生职称" prop="docTitleid">
<el-select v-model="ruleForm.docTitleid" placeholder="请选择医生职称">
<el-option
v-for="item in constantItems"
:key="item.id"
:label="item.constantName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否参与排班" prop="isScheduling">
<el-switch v-model="ruleForm.isScheduling"></el-switch>
</el-form-item>
<el-form-item label="所在科室" prop="deptId">
<el-select v-model="ruleForm.deptId" placeholder="请选择所在科室">
<el-option
v-for="item in depts"
:key="item.id"
:label="item.deptName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="挂号级别" prop="registLeid">
<el-select v-model="ruleForm.registLeid" placeholder="请选择挂号级别">
<el-option
v-for="item in RegistLevels"
:key="item.id"
:label="item.registName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
//这里的属性跟实体类里的相同
ruleForm: {
userName: '',
password: '',
realName: '',
//下拉列表
useType: '',
docTitleid: '',
isScheduling:false,
deptId:'',
registLeid:'',
delMark: '1'
},
constantItems:[{"id":'11',"constantName":'内科'},{"id":'12',"constantName":'儿科'}],
depts:[{"id":'11',"deptName":'神经内科'},{"id":'2',"deptName":'普通内科'}],
RegistLevels:[{"id":'1',"registName":'专家号'},{"id":'2',"registName":'普通号'}],
rules: {
userName: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{ min: 3, max: 64, message: '长度在 3 到64 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 64, message: '长度在 6 到 64 个字符', trigger: 'blur' }
],
realName: [
{ required: true, message: '请输入真实姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style>
</style>
第四步：后台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("http://localhost:8081")
//设置允许访访问 的方法
.allowedMethods(ALL)
//设置允许的header
.allowedHeaders(ALL)
//是否允许证书
.allowCredentials(true);
}
};
}
}
springboot2.2.6跨域
@SpringBootConfiguration
@ComponentScan(basePackages={"com.neuedu.his"})
public class SpringConfig {
//xml:<bean id="" class="org.springframework.web.servlet.config.annotation.WebMvcConfigurer"/>
@Bean
public WebMvcConfigurer corsConfigurer() {
//WebMvcConfigurerAdapter implements WebMvcConfigurer --->addCorsMappings
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
// 限制了路径和域名的访问
registry.addMapping("/**")
//授权访问的前端地址
.allowedOrigins("http://localhost:8080")
//设置允许访访问 的方法
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
//设置允许的header
.allowedHeaders("*")
//是否允许证书
.allowCredentials(true);
}
};
}
}
application.properties 下增加如下设置
spring.jpa.hibernate.naming.physical-strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
HisUser实体类
package com.neuedu.demo.domain;
import java.io.Serializable;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import org.hibernate.annotations.GenericGenerator;
@Entity
@Table(name = "user")
@GenericGenerator(name = "jpa-uuid", strategy = "uuid")
public class HisUser implements Serializable{
@Id
@GeneratedValue(generator = "jpa-uuid")
@Column(length = 32)
private String id;
@Column(name = "userName", nullable = true, length = 64)
private String userName;
@Column(name = "password", nullable = true, length = 64)
private String password;
@Column(name = "realName", nullable = true, length = 64)
private String realName;
@Column(name = "useType", nullable = true, length = 1)
private int useType;
@Column(name = "docTitleid", nullable = true, length = 9)
private int docTitleid;
@Column(name = "isScheduling", nullable = true, length = 6)
private String isScheduling;
@Column(name = "deptId", nullable = true, length = 9)
private String deptId;
@Column(name = "registLeid", nullable = true, length = 9)
private String registLeid;
@Column(name = "delMark", nullable = true, length = 1)
private String delMark;
......get/set略
}
2）HisUserController
package com.neuedu.demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.neuedu.demo.dao.HisUserRepository;
import com.neuedu.demo.domain.HisUser;
@RestController
@RequestMapping(value = "/reg")
public class HisUserController {
@Autowired
private HisUserRepository hisUserRepository;
@RequestMapping(path = "add")
public String add(@RequestBody HisUser user) {
System.out.println("用户注册准备");
System.out.println(user.getIsScheduling());
hisUserRepository.save(user);
return "success";
}
}
页面添加axios请求
改造methods部分
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
//alert('submit!');
//此处为新增加代码，用于请求后台进行注册 this.$axios.post('http://localhost:8082/reg/add',this.ruleForm, {
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}})
.then(response=>{
alert(response.data);
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
测试
npm run dev
启动服务，浏览器输入
http://localhost:8081/
image.png
点击save按钮，显示成功
image.png
日期控件的使用方式
^ - ^
利用日期控件自带的方法 value-format
https://element.eleme.cn/#/zh-CN/component/date-picker#ri-qi-ge-shi
<el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy年MM月dd日"></el-date-picker>
