第5章脚手架(三)项目-注册功能

2019-03-01 本文已影响495人 wqjcarnation

预备知识(备查)：
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>

再测试

http://localhost:8080/

image.png

OK!

第5章脚手架(三)项目-注册功能

目标

项目位置

框架选择

第一步：新建工程springboot-vue，并导入常用的包

第二步编码

在main.js文件中引入 element 组件

step 1 引入

国际化

第三步：前台工程编码vue：d:\vue\springboot-vue

1）main.js完整的代码如下

2）编写注册页面ElMain.vue

3）路由文件router/index.js

第四步：后台spring-boot:D:\springboot\demo-jpa1

1）主配置文件中增加跨域权限配置SpringConfig.java内容如下

2）PersonController

测试

日期显示形式改造

再测试

猜你喜欢

热点阅读

第5章 脚手架(三)项目-注册功能

目标

项目位置

框架选择

第一步：新建工程springboot-vue，并导入常用的包

第二步 编码

在main.js文件中引入 element 组件

step 1 引入

国际化

第三步：前台工程编码vue：d:\vue\springboot-vue

1）main.js完整的代码如下

2）编写注册页面ElMain.vue

3）路由文件router/index.js

第四步：后台spring-boot:D:\springboot\demo-jpa1

1）主配置文件中增加跨域权限配置SpringConfig.java内容如下

2）PersonController

测试

日期显示形式改造

再测试

猜你喜欢

热点阅读

第5章脚手架(三)项目-注册功能

第二步编码