前端如何接收实体类list_Vue.js---实现前后端分离架构中前端页面搭建（三）

最新推荐文章于 2023-12-05 04:27:59 发布

weixin_39938875

最新推荐文章于 2023-12-05 04:27:59 发布

阅读量1.3k

点赞数

文章标签：前端如何接收实体类list 加了requestmapping后前端访问不到

【Vue.js实现前后端分离架构中前端页面搭建】

十四、Vue Element

Vue Element 就是Vue的扩展插件。

在课堂上使用Eleme 提供的Vue 2.0插件。

1. 添加依赖

安装element-ui。直接在IDEA中terminal中运行

2. 引入Element依赖

修改main.js ，添加红色三行代码。表示引入eleme element

（官网文档 -> 快速上手中就是下面代码）

3. 添加标签

在App.vue中添加Eleme官网中组件内容。以按钮举例。

4. 查看页面

在页面中会显示带有样式的按钮

十五、Elment Form

1. 编写服务器端代码

@RequestMapping("/register")
public int register(String name,Integer age,String address){
    System.out.println(name);
    System.out.println(age);
    System.out.println(address);
    return 1;
}

2. 编写前端代码

修改App.vue如下

<template>
    <div>
        <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 label="地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                    age:'',
                    address:''
                }
            }
        },
        methods: {
            onSubmit() {
                this.$axios.post("/api/register",this.$qstring.stringify({
                    name:this.form.name,
                    age:this.form.age,
                    address:this.form.address
                }))
                    .then(res => {
                        if(res.data==1){
                            this.$message({
                                message: '恭喜你，这是一条成功消息',
                                type: 'success'
                            });
                        }
                    })
            }
        }
    }
</script>

3. 页面效果

十六、Element Table

1. 编写服务器端代码

新建实体类com.bjsxt.pojo.People

@Data
@AllArgsConstructor
@NoArgsConstructor
public class People {
    private String name;
    private Integer age;
    private String address;
}

编写控制器方法

@RequestMapping("/show")
public List<People> show(){
    List<People> list = new ArrayList<>();
    list.add(new People("张三",12,"北京"));
    list.add(new People("李四",13,"上海"));
    return list;
}

2. 编写Vue项目

修改App.vue

<template>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="name"
                label="姓名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="120">
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        data() {
            return {
                tableData: []
            }
        },
        mounted() {
            this.$axios.get("/api/show")
                .then(res => {
                    this.tableData = res.data;
                })
        }
    }
</script>

3. 效果

十七、搭建登录页面

1. 新建项目

新建Vue.js项目，命名为backend

2. 添加依赖

在Terminal下运行下面命令

添加路由依赖

添加Element-UI依赖

3. 新建登录页面

在src下新建views/Login.vue

<template>
    <div id="login-div">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
                <el-tag style="font-size: 30px; height: 35px; line-height: 35px;">欢迎使用S101后台管理系统</el-tag>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: '',
                    password:''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

<style scoped>
#login-div{
    width: 500px;
    margin: 0px auto;
}
</style>

4. 配置路由

在src目录下新建router/index.js.

以后每次新建页面都需要把红色部分再写一遍。

5. 修改main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

6. 访问页面

在浏览器输入：http://localhost:8080

十八、登录页面网络请求功能

1. 安装axios组件

在terminal中运行

2. 修改main.js

设置两个全局属性

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios"
import qstring from "querystring"

Vue.prototype.$axios = axios
Vue.prototype.$qstring=qstring

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. 新建Main.vue

页面只有字符串main

<template>
    <div>
        main
    </div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>

4. 修改路由配置

修改router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "@/views/Login";
import Main from "@/views/Main";

Vue.use(VueRouter);
const router = new VueRouter({
    mode:"history",
    routes:[
        {
            path:"/",
            component:Login
        },
        {
            path:"/main",
            component:Main
        }
    ]
});
export default router

5. 修改Login.vue

添加了两个功能：

添加了客户端验证
添加了表单数据发送

<template>
    <div id="login-div">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item>
                <el-tag style="font-size: 30px; height: 35px; line-height: 35px;">欢迎使用S101后台管理系统</el-tag>
            </el-form-item>
            <el-form-item label="用户名" prop="username" :rules="[
                  { required: true, message: '用户名不能为空'}
                ]">
                <el-input type="username" v-model="form.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :rules="[
                  { required: true, message: '密码不能为空'}
                ]">
                <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: '',
                    password:''
                }
            }
        },
        methods: {
            onSubmit() {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        this.$axios.post("http://localhost:8081/login",this.$qstring.stringify({
                            username:this.form.username,
                            password:this.form.password
                        })).then(res => {
                           if(res.data.status==200){
                               // Vue 中使用JS实现路由跳转功能
                               this.$router.push("/main");
                           }else{
                               this.$message.error('用户名或密码错误');
                           }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style scoped>
#login-div{
    width: 500px;
    margin: 0px auto;
}
</style>

十九、配置代理

1. 新建配置文件

在项目根路径下新建vue.config.js

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                // 网关地址 Gateway
                target: 'http://localhost:8090/',
                ws: true,
                pathRewrite: {
                    '^/api': ''
                },
                changeOrigin: true
            }
        }
    }
}

2. 修改Login.vue

原代码