vue前端架构文档_Vue.js---实现前后端分离架构中前端页面搭建（四）（完）

最新推荐文章于 2024-05-27 21:03:40 发布

weixin_39835991

最新推荐文章于 2024-05-27 21:03:40 发布

阅读量388

点赞数

文章标签： vue前端架构文档

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

二十、实现服务端登录业务

前提：已经有单机版Eureka，端口8761.启动开Eureka

1. 新建父项目

新建backend_parent。

为了不开很多IDEA窗口，在练习时都是采用聚合项目进行演示，实际开发中多是独立项目。

1.1 配置pom.xml

配置父项目的pom.xml

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.6.RELEASE</version>
</parent>
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-dependencies</artifactId>
            <version>Hoxton.SR3</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>2.2.6.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
            <version>2.2.2.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-mongodb</artifactId>
            <version>2.2.6.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.cloud</groupId>
            <artifactId>spring-cloud-starter-gateway</artifactId>
            <version>2.2.2.RELEASE</version>
        </dependency>
    </dependencies>
</dependencyManagement>
<dependencies>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.12</version>
        <scope>provided</scope>
    </dependency>
</dependencies>

2. 新建gateway module

2.1 编写pom

<dependencies>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-gateway</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
</dependencies>

2.2 新建配置文件

新建application.yml

server:
  port: 8090
spring:
  application:
    name: gateway
  cloud:
    gateway:
      discovery:
        locator:
          enabled: true # 开启当前项目服务注册与发现功能
          lower-case-service-id: true # 把服务名转换为小写，Eureka中默认都是大写
      routes:
        - id: login #自定义唯一标识，只要不重复即可
          uri: lb://LOGIN # lb:loadBalance EUREKA-CLIENT 代理项目的名
          predicates: Path=/login/** # 路径规则
          filters: StripPrefix=1 # 转发后忽略第一层

2.3 新建启动类

新建com.bjsxt.GatewayApplication

@SpringBootApplication
public class GatewayApplication {
    public static void main(String[] args) {
        SpringApplication.run(GatewayApplication.class,args);
    }
}

3. 新建commons module

新建前后端数据交互模板类

新建 com.bjsxt.commons.pojo.BackendResult

@Data
public class BackendResult {
    private int status;
    private Object data;
    private String msg;

    public static BackendResult ok(){
        BackendResult br = new BackendResult();
        br.setStatus(200);
        br.setMsg("ok");
        return br;
    }

    public static BackendResult error(String msg){
        BackendResult br = new BackendResult();
        br.setStatus(400);
        br.setMsg(msg);
        return br;
    }
}

4. 新建pojo module

新建com.bjsxt.pojo.User

@Data
public class User {
    private String id;
    private String username;
    private String password;
}

5. 新建logo module

5.1 配置pom

依赖commons和pojo

<dependencies>
    <dependency>
        <artifactId>pojo</artifactId>
        <groupId>com.bjsxt</groupId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <dependency>
        <artifactId>commons</artifactId>
        <groupId>com.bjsxt</groupId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-mongodb</artifactId>
    </dependency>
</dependencies>

5.2 新建配置文件

新建application.yml

spring:
  application:
    name: login
  data:
    mongodb:
      host: 192.168.8.139
      port: 27017
      username: bjsxt
      password: bjsxtpwd
      database: backend
      authentication-database: admin
eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka/
server:
  port: 8081

5.3 新建测试类

在src/test下新建com.bjsxt.MyTest。

使用单元测试录入数据能够保证MongoDB的数据库和集合能跟项目环境（实体类和配置文件内容）对应。

运行insert() 录入一条数据。

@SpringBootTest(classes = LoginApplication.class)
@RunWith(SpringJUnit4ClassRunner.class)
public class MyTest {
    @Autowired
    private MongoTemplate mongoTemplate;

    @Test
    public void insert(){
        User user = new User();
        user.setUsername("bjsxt");
        user.setPassword("smallming");
        mongoTemplate.insert(user);
    }
}

5.4 新建service及实现类

com.bjsxt.service.UserService

public interface UserService {
    BackendResult login(User user);
}

实现类

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private MongoTemplate mongoTemplate;
    @Override
    public BackendResult login(User user) {
        Criteria criteria = new Criteria();
        criteria.andOperator(Criteria.where("username").is(user.getUsername()),Criteria.where("password").is(user.getPassword()));
        Query query = new Query(criteria);
        User result = mongoTemplate.findOne(query, User.class);
        if(result!=null){
            return BackendResult.ok();
        }
        return BackendResult.error("登录失败");
    }
}

5.5 新建控制器

新建com.bjsxt.controller.UserController。

千万不要忘记跨域

@RestController
@CrossOrigin
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/login")
    public BackendResult login(User user){
        return userService.login(user);
    }

}

5.6 新建启动器

新建com.bjsxt.LoginApplication

@SpringBootApplication
public class LoginApplication {
    public static void main(String[] args) {
        SpringApplication.run(LoginApplication.class,args);
    }
}

6. 登录测试

在浏览器中测试登录页面是否能登录成

二十一、显示主页面

1. 修改App.vue

修改样式。让从HTML标签开始占整个屏幕100%。百分比特性具有继承性，当一个元素设置百分比属性时，父元素的这个属性必须有值，值可以是固定值也可以是百分比。如果父元素也是百分比，以此类推，一直到HTML标签都需要设置百分比。

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 0px;
  height: 100%;
}

  html,body{
    height: 100%;
    margin:0px;
    padding:0px;
  }
</style>

2. 编写Main.vue

<template>
    <el-container style="height: 100%">
        <el-header style="height: 20%">
            欢迎使用S101后台管理系统
        </el-header>
        <el-container style="height: 60%">
            <el-aside width="200px">
            </el-aside>
            <el-main>
            </el-main>
        </el-container>
        <el-footer style="height: 20%">
            Copyright @ 北京尚学堂S101班级
        </el-footer>
    </el-container>
</template>

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

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        padding:0px;
    }
</style>

3. 页面效果

二十二、显示树状菜单

1. 新建页面

在项目src/views中新建MenuTree.vue

<template>
    <el-tree :default-expand-all="true" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

<script>
    export default {
        data() {
            return {
                data: [
                    {
                        label:"系统管理",
                        children: [{
                            label:"用户管理"
                        },{
                            label: "修改密码"
                        }]
                    },
                    {
                        label:"公告管理",
                        children: [{
                            label:"公告查看"
                        },{
                            label: "公告新增"
                        }]
                    }
                ],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            };
        },
        methods: {
            handleNodeClick(data) {
                if(data.label=="用户管理"){

                }
            }
        }
    };
</script>

<style scoped>

</style>

2. 修改Main.vue

引入MenuTree组件

<template>
    <el-container style="height: 100%">
        <el-header style="height: 20%">
            欢迎使用S101后台管理系统
        </el-header>
        <el-container style="height: 60%">
            <el-aside width="200px">
                <MenuTree/>
            </el-aside>
            <el-main>
            </el-main>
        </el-container>
        <el-footer style="height: 20%">
            Copyright @ 北京尚学堂S101班级
        </el-footer>
    </el-container>
</template>

<script>
    import MenuTree from "@/views/MenuTree";
    export default {
        name: "Main",
        components:{
            MenuTree
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        padding:0px;
    }
</style>

3. 页面效果

二十三、显示用户管理页面

1. 新建页面

在src/views新建sys/User.vue

定义标签属性时：冒号属性名
定义标签事件时： @事件名

<template>
    <div>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    >
            </el-table-column>
        </el-table>
        <el-pagination
                layout="sizes, prev, pager, next , total"
                :page-sizes="[2, 3, 4, 5, 6, 7]"
                :page-size="2"
                :current-page="page"
                @current-change="getData"
                @size-change="changeSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                size:2,
                page:1,
                total:100
            }
        },
        methods:{
            getData:function(page){
                console.log(page+"  "+this.size)
                this.page = page;
                this.initTable()
            },
            changeSize:function (size) {
                this.size = size
                this.page=1
                this.initTable()
            },
            initTable:function () {
                this.$axios.post("/api/user/showUser",this.$qstring.stringify({
                    page:this.page,
                    size:this.size
                })).then(res => {
                    this.tableData = res.data.rows;
                    this.total = res.data.total;
                })
            }
        },
        mounted() {
            this.initTable();
        }
    }
</script>

2. 配置路由

修改router/index.js

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

Vue.use(VueRouter);
const router = new VueRouter({
    mode:"history",
    routes:[
        {
            path:"/",
            component:Login
        },
        {
            path:"/main",
            component:Main,
            children:[ // 二级路由定义方式
                {
                    path:"/user",
                    component:User
                }
            ]
        }
    ]
});
export default router

3. 修改Main.vue

<template>
    <el-container style="height: 100%">
        <el-header style="height: 20%">
            欢迎使用S101后台管理系统
        </el-header>
        <el-container style="height: 60%">
            <el-aside width="200px">
                <MenuTree/>
            </el-aside>
            <el-main>
                <!-- 二级路由页面 -->
                <router-view/>
            </el-main>
        </el-container>
        <el-footer style="height: 20%">
            Copyright @ 北京尚学堂S101班级
        </el-footer>
    </el-container>
</template>

4. 修改MenuTree.vue

只修改点击用户管理菜单时执行功能

methods: {
    handleNodeClick(data) {
        if(data.label=="用户管理"){
            // 跳转到二级路由写法。user放当前/main的子路由
            this.$router.push("user")
        }
    }
}

二十四、实现服务端分页查询用户信息功能

1. 插入测试数据

多次执行login项目测试类中方法，向User集合插入3条数据

2. 修改commons

新建com.bjsxt.commons.pojo.TablePojo

@Data
public class TablePojo {
    private List<?> rows;
    private Integer total;
}

3. 新建user项目

3.1 修改pom

<dependencies>
    <dependency>
        <artifactId>pojo</artifactId>
        <groupId>com.bjsxt</groupId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <dependency>
        <artifactId>commons</artifactId>
        <groupId>com.bjsxt</groupId>
        <version>1.0-SNAPSHOT</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.cloud</groupId>
        <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-mongodb</artifactId>
    </dependency>
</dependencies>

3.2 新建配置文件

新建application.yml

spring:
  application:
    name: user
  data:
    mongodb:
      host: 192.168.8.139
      port: 27017
      username: bjsxt
      password: bjsxtpwd
      database: backend
      authentication-database: admin
eureka:
  client:
    service-url:
      defaultZone: http://localhost:8761/eureka/

server:
  port: 8082

3.3 新建service及实现类

com.bjsxt.service.UserService

public interface UserService {
    TablePojo page(int page, int size);
}

实现类

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private MongoTemplate mongoTemplate;
    @Override
    public TablePojo page(int page, int size) {
        // 取当前页数据
        Query query = new Query();
        query.with(PageRequest.of(page-1,size));
        List<User> list = mongoTemplate.find(query, User.class);
        // 总条数
        TypedAggregation<User> aggregation = TypedAggregation.newAggregation(User.class,Aggregation.group().count().as("count"));
        AggregationResults<Map> aggregate = mongoTemplate.aggregate(aggregation, Map.class);

        TablePojo tablePojo = new TablePojo();
        tablePojo.setTotal((Integer) aggregate.getUniqueMappedResult().get("count"));
        tablePojo.setRows(list);
        return tablePojo;
    }
}

3.4 新建控制器

新建com.bjsxt.controller.UserController

@RestController
public class UserController {
    @Autowired
    private UserService userService;

    @RequestMapping("/showUser")
    public TablePojo showTablePojo(int page,int size){
        return userService.page(page,size);
    }
}

3.5 新建启动器

新建com.bjsxt.UserApplication

@SpringBootApplication
public class UserApplication {
    public static void main(String[] args) {
        SpringApplication.run(UserApplication.class,args);
    }
}

3.6 测试效果

在浏览器输入： http://localhost:8082/showUser?page=1&size=2

4. 修改网关

4.1 修改配置文件

修改gateway项目配置文件

server:
  port: 8090
spring:
  application:
    name: gateway
  cloud:
    gateway:
      discovery:
        locator:
          enabled: true # 开启当前项目服务注册与发现功能
          lower-case-service-id: true # 把服务名转换为小写，Eureka中默认都是大写
      routes:
        - id: login #自定义唯一标识，只要不重复即可
          uri: lb://LOGIN # lb:loadBalance EUREKA-CLIENT 代理项目的名
          predicates: Path=/login/** # 路径规则
          filters: StripPrefix=1 # 转发后忽略第一层
        - id: user #自定义唯一标识，只要不重复即可
          uri: lb://USER # lb:loadBalance EUREKA-CLIENT 代理项目的名
          predicates: Path=/user/** # 路径规则
          filters: StripPrefix=1 # 转发后忽略第一层

4.2 测试网关访问效果

浏览器访问：http://localhost:8090/user/showUser?page=1&size=2