[Java EE] Vue
|
Java
|
258

1097 字
|
52 分钟

1. 前期准备

解压并复制static至resource处

下载点这里

pom.xml→dependencies标签→添加Thymeleaf 启动器→刷新

<!--Thymeleaf 启动器-->
<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

2. 解析vueDemo到浏览器

templates→vueDemo.html，简单书写一个你好，世界！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

controller→RedController(用于打开vueDemo.html)

package com..www.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller

public class RedController {
    @RequestMapping("/goVue") //localhost:9090/goVue
    //@ResponseBody 页面跳转，不加ResponseBody注解，Spring Boot就会根据我们的请求去templates里面找到对应的识图(vueDemo.html)
    //然后经过视图解析器，将html映射到浏览器上
    //加了浏览器就会显示下面的返回值"vueDemo"，即把vueDemo当成一个字符

    public String goVueDemo(){
        return "vueDemo";
    }
}

3. 完善vueDemo.html

vueDemo.html的框架如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一步：导入vue.js文件-->
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
</head>

<body>
<h1>你好，世界！</h1>
<!--第二步:声明vue对象的作用域，绑定作用域，在一个div标签里面通过一个id标签进行声明-->
<div id="app">

</div>

<!--第三步：创建vue对象，在<script>标签里面进行创建，通过new Vue({ })-->
<script>
    new Vue({
        <!--第四步：通过el属性绑定作用域，#id-->
        el:"#app",
        <!--第五步：数据声明，就相当于一个Java变量data:{ }-->
        data:{

        },
        <!--第六步：声明方法，通过methods:{}-->
        method:{

        },
        <!--第七步：文档加载事件，周期函数，对勾函数-->
        mounted:{

        }
    })
</script>
</body>
</html>

3.1 数据的单项绑定

3.2 数据的双向绑定

（1）基本内容：在浏览器显示姓名、性别单选、爱好复选

在data里书写user中的userSex和loves

（2）其他内容：注册和登录按钮

在method中添加相应方法

最后再加上一个数据展示：

最终效果展示：

完整代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一步-->
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
</head>
<!--
第一步：导入vue.js文件（th:src="@{/js/vue.min.js}"）；
第二步：就是声明vue作用域（对象），在一个div标签里面通过一个id标签进行声明)；
第三步：就是创建vue对象，在<script>标签里面进行创建,通过new Vue({  });
第四步：绑定vue的对象（绑定vue的作用域），通过el表达式进行绑定（el:"#app",）；
第五步；就是数据声明，就相当于一个Java变量：data:{  }；
第六步：声明方法，通过methods:{}
最后一步：文档加载事件，周期函数，对勾函数,mounted()
-->
<body>
<h1>你好，世界！</h1>
<!--第二步-->
<div id="app">
    <p>---------------数据的单项绑定------------</p>
    {{username}}
    <p><input type="text" v-bind:value="username"/></p>
    <p><input type="text" :value="username"/></p>
    <p>=============数据的双向绑定=============</p>
    <p><input type="text" v-model="username"/></p>
    <p>性别
        <input type="radio" value="男" v-model="user.userSex"/>男
        <input type="radio" value="女" v-model="user.userSex"/>女
    </p>
    <p>爱好
        <input type="checkbox" value="旅行" v-model="user.loves"/>旅行
        <input type="checkbox" value="游泳" v-model="user.loves"/>游泳
        <input type="checkbox" value="爬山" v-model="user.loves"/>爬山
    </p>
    <h5>《数据展示》</h5>
    {{user.userSex}}
    {{user.loves}}
    <!--事件绑定-->
    <p><input type="button" v-on:click="login" value="注册"/></p>
    <p><input type="button" @click="reg" value="登录"></p>
</div>
<!--第三步-->
<script>
    new Vue({
        /*第四步*/
        el: "#app",
        /*第五步*/
        data: {
            username: "YHYShiroha",
            user: {
                userSex: "女",
                loves: [
                    '旅行', '游泳', '爬山'
                ]
            }
        },
        /*第六步*/
        methods: {
            login() {
                /*在控制台打印信息，this指data里的内容*/
                console.log(this.username)
                console.log(this.user.userSex)
                console.log(this.user.loves)
            },
            reg() {
                console.log(this.username)
                console.log(this.user.userSex)
                console.log(this.user.loves)
            }
        },
        /*第七步*/
        mounted() {

        }
    })
</script>

</body>

</html>

两种绑定的特点：

（1）更改数据单项绑定：其他不会跟着改

（2）更改数据双向绑定：其他会跟着改

4. 实现后端到前端的传送

在domain下建立vo.ResultVo，用于返回前端的数据集

package com.xxx.www.domain.vo;

public class ResultVo {
    private Integer status; //状态码：200、400、405
    private String message; //提示信息（注册成功）
    private Object data; //数据

    public ResultVo() {
    }

    public ResultVo(Integer status, String message) {
        this.status = status;
        this.message = message;
    }

    public ResultVo(Integer status, String message, Object data) {
        this.status = status;
        this.message = message;
        this.data = data;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

5. 实现登录（后端）

com.xxx.www.mapper→StuMapper，添加以下代码

//登录方法（用户输入自己的信息，比如手机号码，邮箱，密码），去数据库里查询信息，如果有这个信息，就说明该用户已经注册了
//如果输入的密码正确（就是用户输入的密码和数据库里面的密码作比较）如果密码判断是一样的，那就说经密码正确，则登录成功
Students studentLogin(Students students);

resources.mapper→studentMapper→<mapper>，书写SQL语句

<!--登录功能
 select * from students where stu_no = ?
-->
<select id="studentLogin" resultMap="students">
    select * from students
    <where>
        <if test="studentNo != null and studentNo != '' ">
            stu_no = #{studentNo}
        </if>
        <if test="studentPhone != null and studentPhone != '' ">
            stu_Phone = #{studentPhone}
        </if>
        <if test="studentEmail != null and studentEmail != '' ">
            stu_Email = #{studentEmail}
        </if>
    </where>
</select>

com.xxx.www.service→StuService，添加方法

//执行登录功能
ResultVo studentLogin(Students students);

com.xxx.www.service→impl→StuServiceImpl，实现Mapper里登录的方法

@Override
public ResultVo studentLogin(Students students) {
    Students stu = stuMapper.studentLogin(students); //执行Mapper里面的方法
    if(stu != null){    //如果不为空，就表示数据库里面有信息，并且将查询出来赋值给stu变量
        //将stu变量里面的密码与前端传过来的密码作比较，如果相等就说明输入的密码正确
        if(stu.getPassword().equals(students.getPassword())){
            return new ResultVo(200, "正在登录！", stu); //返回提示信息
        } else {
            //不相等就提示密码错误
            return new ResultVo(500, "密码输入错误！", stu); //返回提示信息
        }
    } else { //stu为空
        return new ResultVo(450, "账号未注册！", stu); //返回提示信息
    }
}

com.xxx.www.controller→StuController，编写控制层

//执行登录功能
@ResponseBody //是将后端数据以JSON数据格式发送给前端
@RequestMapping("/studentLogin") //localhost:9090/studentLogin
public ResultVo studentLoginController(@RequestBody Students students){ //@RequestBody 是接收前端发送到后端的JSON格式的数据
    ResultVo resultVo = stuService.studentLogin(students);
    return resultVo;
}

下载Postman，输入数据库中学生信息进行测试

网址：https://www.postman.com/

想在控制台看到打印信息的话，就在application.properties添加配置文件使得控制台打印完整带参数SQL语句

#mybatis-plus配置控制台打印完整带参数SQL语句
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

6. 实现登录（前端）

resources→templates，新建index.html，写入以下内容

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/css/snow.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/lib/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/js/xadmin.js}" type="text/javascript"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div class="snow-container">
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
</div>

<div class="top-buttons-agileinfo">
    <a href="" class="active">登  录</a><a href="/register" >注  册</a>
</div>
<h1>学生管理系统</h1>

<!--第二步-->
<div class="main-agileits" id="loginApp">
    <!--form-stars-here-->
    <div class="form-w3-agile">
        <h2 class="sub-agileits-w3layouts">登  录</h2>
        <form>
            <input type="text" v-model="students.studentNo" placeholder="请输入学号、手机或邮箱"/>
            <input type="password" v-model="students.password" placeholder="输入登录密码" />

            <div class="submit-w3l">
                <!--单击事件：click-->
                <input type="button" @click="login" value="登  录" >
            </div>
            <p class="p-bottom-w3ls"><a href="/register" >点击注册</a>if u do not have an account yet.</p>
        </form>
    </div>
</div>

<!--//form-ends-here-->
<!-- copyright -->
<div class="copyright w3-agile">
    <p>  2024 Internship Sign In & Sign Up Form . All rights reserved | Design by <a href="https://shop585798004.taobao.com/" target="_blank">前端ui</a></p>
</div>

<script>
    new Vue({
        el:"#loginApp",
        data:{
            students:{
                studentNo:'',
                studentPhone:'',
                tudentEmail:'',
                password:''
            }
        },
        methods:{
            login(){
                var _this = this;   /*在vue中，this对象发送ajax之后就不再vue是vue对象了，想要使用vue对象，就需要将this赋值给另一个变量*/
                console.log("------------------")
                $.ajax({
                    url:'/studentLogin',  /*请求地址*/
                    dataType: "JSON",  /*请求的数据类型：在@ResponsBody*/
                    type: "POST",  /*请求方式:GetMapping, PostPMapping,PutMapping*/

                    data:JSON.stringify(this.students),  /*将前端对象以JSON数据格式格式发送给后端（Java）*/
                    contentType: "application/json",  /*搭配JSON.stringify*/

                    success: function (rs) {     /*如果请求成功，则执行success这里面的方法，rs表示后端发送过来的数据*/
                        console.log(rs)
                        if (rs.status == 200) { //登录成功,进行跳转
                            _this.$message(rs.message)
                            setTimeout(function () {
                                location.href = '/goVue' //跳转，1秒后跳转
                            },1000)
                        }else {
                            _this.$message(rs.message)
                        }
                    },error:function (){
                        _this.$message("服务器错误！")
                    }
                });
            }
        },
        mounted(){

        },

    })
</script>
</body>
</html>

打开浏览器，只需在浏览器输入localhost:9090即可打开登录界面。

之后输入学生编号（studentNo）和对应密码即可登录，此时还不能用电话和邮箱登录（还没写）。

7. 跳转

resources→templates，新建student.UIndex.html，写入以下内容

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title>后台首页</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" th:href="@{/css/snow.css}">
    <link rel="stylesheet" th:href="@{/index/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/lib/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/js/xadmin.js}" type="text/javascript"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!-- 顶部开始 -->
<div class="container" id="app">
    <div class="logo"><a href="#">后台管理系统</a></div>
    <div class="left_open">
        <i title="展开左侧栏" class="iconfont"></i>
    </div>
    <div>
        <img style="margin-left: 1020px;width: 40px;height: 40px;border-radius:50%; overflow:hidden;" :src="src" @click="chooseImage">
        <input id="file" type="file" name="file" @change="changeImage()" style="display: none">
        <ul class="layui-nav right" lay-filter="">
            <li class="layui-nav-item">
                <a href="javascript:;">欢迎您：{{loginUsername}}</a>
                <dl class="layui-nav-child"> <!-- 二级菜单 -->
                    <dd><a href="http://localhost:8080/logout">退出</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item to-index"><a href="javascript:void(0);">前台首页</a></li>
        </ul>
    </div>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<!-- 左侧菜单开始 -->
<div class="left-nav">
    <div id="side-nav">
        <ul id="nav">
            <!--第一个菜单-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>学生管理</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="/api/goUserList">
                            <i class="iconfont"></i>
                            <cite>学生列表</cite>
                        </a>
                    </li>
                </ul>
            </li>
            <!--第二个菜单-->
            <li>
                <a href="javascript:;">
                    <i class="iconfont"></i>
                    <cite>图书管理</cite>
                    <i class="iconfont nav_right"></i>
                </a>
                <ul class="sub-menu">
                    <li>
                        <a _href="#">
                            <i class="iconfont"></i>
                            <cite>图书列表</cite>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!-- <div class="x-slide_left"></div> -->
<!-- 左侧菜单结束 -->
<!-- 右侧主体开始 -->
<div class="page-content">
    <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
        <ul class="layui-tab-title">
            <li>我的桌面</li>
        </ul>
        <div class="layui-tab-content" th:style="'background:url(' + '../images/dream.jpg' + ')' + 'no-repeat;' + 'background-size:cover;'">
            <div class="layui-tab-item layui-show" >
                <iframe src="" frameborder="0" scrolling="yes" name="right" class="x-iframe"></iframe>
            </div>
        </div>
    </div>
</div>
<div class="page-content-bg"></div>
<!-- 右侧主体结束 -->
<!-- 中部结束 -->
<!-- 底部开始 -->
<div class="footer">
    <div class="copyright">Copyright ©2017 rock</div>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            loginUsername:"紫霞仙子",
            src:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        },
        methods:{
            changeImage(){

            },
            chooseImage(){
                $("#file").click();
            }
        },
        mounted(){
            this.loginUsername = localStorage.getItem("loginUsername")
        }
    })
</script>
</body>
</html>

controller→RedController，添加以下内容

 @RequestMapping("/goUIndex") //localhost:9090/goUIndex
 public String goUIndex(){
     return "students/UIndex";
 }

修改index.html中的goVue为goUIndex

登录网站。

8. 学生列表

resources→templates→student，新建studentList.html，写入以下内容

controller→RedController，添加以下内容

 @RequestMapping("/goStudentList") //localhost:9090/goUIndex
 public String goStudentList(){
     return "students/studentList";
 }

修改UIndex.html中学生列表处网址为goStudentList

再次登录，点击学生列表就会进入对应子目录

本人邮箱：yhyshiroha123@outlook.jp
JavaJava EEVue
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
[Java EE] Java + MySQL

							
							

							
[Java EE] Spring Boot项目基础

							
							

							
八数码难题

							
							

							
[基础算法]排序