尚好房 08_前端登录、注册与关注房源

尚好房：前端登录、注册与关注房源

一、注册功能

1、搭建service-user模块

1.1 创建工程

在service项目中新建子工程service-user，并且使用插件转换成javaweb项目

1.2 pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>serviceartifactId>
        <groupId>com.atguigugroupId>
        <version>1.0version>
    parent>
    <modelVersion>4.0.0modelVersion>

    <artifactId>service-userartifactId>
    <packaging>warpackaging>

    <build>
        <plugins>
            <plugin>
                <groupId>org.eclipse.jettygroupId>
                <artifactId>jetty-maven-pluginartifactId>
                <version>9.4.15.v20190215version>
                <configuration>
                    
                    <scanIntervalSeconds>2scanIntervalSeconds>
                    <webAppConfig>
                        
                        <contextPath>/contextPath>
                    webAppConfig>
                    <httpConnector>
                        
                        <port>7003port>
                    httpConnector>
                configuration>
            plugin>
        plugins>
    build>
project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

1.3 拷贝配置文件

拷贝logback.xml和jdbc.properties文件到resources目录

1.4 spring-persist.xml

创建resources/spring/spring-persist.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">

    
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" destroy-method="close">
        <property name="username" value="${datasource.username}" />
        <property name="password" value="${datasource.password}" />
        <property name="driverClassName" value="${datasource.driverClassName}" />
        <property name="url" value="${datasource.url}" />
    bean>

    
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        
        <property name="typeAliasesPackage" value="com.atguigu.entity">property>
        <property name="configuration">
            <bean class="org.apache.ibatis.session.Configuration">
                
                <property name="mapUnderscoreToCamelCase" value="true"/>
            bean>
        property>
        <property name="mapperLocations">
            <array>
                <value>classpath:mappers/*.xmlvalue>
            array>
        property>

        
        <property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <props>
                            
                            <prop key="reasonable">trueprop>
                            
                            
                            <prop key="helperDialect">mysqlprop>
                        props>
                    property>
                bean>
            array>
        property>
    bean>
    
    <bean id="mapperScannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.atguigu.mapper"/>
    bean>
beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

1.5 spring-service.xml

创建resources/spring/spring-service.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                           http://www.springframework.org/schema/beans/spring-beans.xsd
                           http://www.springframework.org/schema/context
                           http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
    
    <context:component-scan base-package="com.atguigu.service"/>
    
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    bean>
    
    <tx:annotation-driven transaction-manager="transactionManager" proxy-target-class="true"/>
beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.6 spring-registry.xml

创建resources/spring/spring-registry.xml

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd http://code.alibabatech.com/schema/dubbo http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
    
    <dubbo:registry address="zookeeper://127.0.0.1:2181"/>
    
    <dubbo:application name="service-user"/>
    
    <dubbo:protocol name="dubbo" port="20883"/>
    
    <dubbo:annotation package="com.atguigu.service.impl"/>
beans>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1.7 web.xml

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListenerlistener-class>
	listener>
	<context-param>
		<param-name>contextConfigLocationparam-name>
		<param-value>classpath:spring/spring-*.xmlparam-value>
	context-param>
web-app>
1
2
3
4
5
6
7
8
9
10
11
12
13

2、持久层

2.1 UserInfoMapper接口

在service-user项目中创建com.atguigu.mapper.UserInfoMapper接口

public interface UserInfoMapper{
    /**
     * 根据用户手机号查询用户信息，如果手机号已存在，则不能注册
     * @param phone
     * @return
     */
    UserInfo getByPhone(String phone);
}
1
2
3
4
5
6
7
8

2.2 UserInfoMapper.xml映射配置文件

在service-user项目中创建resources/mappers/UserInfoMapper.xml映射配置文件

DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.UserInfoMapper">
    <sql id="columns">
       select id,phone,password,nick_name,status,create_time,update_time,is_deleted
    sql>  
    <insert id="insert" useGeneratedKeys="true" keyProperty="id">
        insert into user_info (
            id ,
            phone ,
            password ,
            nick_name ,
            status
        ) values (
                     #{id} ,
                     #{phone} ,
                     #{password} ,
                     #{nickName} ,
                     #{status}
                 )
    insert>
    <select id="getByPhone" resultType="UserInfo">
        <include refid="columns" />
        from user_info
        where
        phone = #{phone}
        and is_deleted = 0
    select>
mapper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3、业务层

3.1 UserInfoService接口

在service-api项目中创建UserInfoService接口

public interface UserInfoService{
    UserInfo getByPhone(String phone);
}
1
2
3

3.2 UserInfoServiceImpl实现类

在service-user项目中创建com.atguigu.service.impl.UserInfoServiceImpl实现类

@Service(interfaceClass = UserInfoService.class)
public class UserInfoServiceImpl implements UserInfoService {
    @Autowired
    private UserInfoMapper userInfoMapper;
    @Override
    public UserInfo getByPhone(String phone) {
        return userInfoMapper.getByPhone(phone);
    }
}
1
2
3
4
5
6
7
8
9

3、表现层

在web-front项目中创建UserInfoController类

@RestController
@RequestMapping("/userInfo")
public class UserInfoController {
    @Reference
    private UserInfoService userInfoService;
    @GetMapping("/sendCode/{phone}")
    public Result sendCode(@PathVariable("phone") String phone, HttpSession session){
        //本应该调用阿里云短信(短信SDK)给phone发送短信
        //现在模拟一个短信
        String code = "1111";
        //实际开发中验证码应该是存储到Redis，并且设置时效性; 我们将其存储到session
        session.setAttribute("CODE",code);
        //验证码发送成功
        return Result.ok();
    }

    @PostMapping("/register")
    public Result register(@RequestBody RegisterBo registerBo,HttpSession session){
        //1. 校验验证码是否正确
        //1.1 获取session中保存的验证码
        String sessionCode = (String) session.getAttribute("CODE");
        //1.2 校验
        if (!registerBo.getCode().equalsIgnoreCase(sessionCode)) {
            //验证码校验失败
            return Result.build(null, ResultCodeEnum.CODE_ERROR);
        }
        //2. 校验手机号是否已存在
        //2.1 调用业务层的方法根据手机号查询用户信息
        UserInfo userInfo = userInfoService.getByPhone(registerBo.getPhone());
        //2.2 判断查询到的用户信息是否为null，如果不为null表示手机号已存在则不能注册
        if (userInfo != null) {
            //手机号已存在
            return Result.build(null,ResultCodeEnum.PHONE_REGISTER_ERROR);
        }
        //3. 对密码进行加密
        String encryptPassword = MD5.encrypt(registerBo.getPassword());
        //4. 调用业务层的方法将数据保存起来
        userInfo = new UserInfo();
        //拷贝属性
        BeanUtils.copyProperties(registerBo,userInfo);
        //重新设置密码
        userInfo.setPassword(encryptPassword);
        //设置status为1
        userInfo.setStatus(1);
        userInfoService.insert(userInfo);
        return Result.ok();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

4、前端页面

在web-front项目中创建webapp/register.html页面

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="Author" contect="http://www.webqin.net">
        <title>尚好房title>
        <link rel="shortcut icon" href="./static/./static/images/favicon.ico"/>
        <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
        <script type="text/javascript" src="./static/js/jquery.js">script>
        <script type="text/javascript" src="./static/js/js.js">script>

        <script type="text/javascript" src="./static/js/vue.js">script>
        <script type="text/javascript" src="./static/js/axios.js">script>
    head>

    <body>
        <div id="register">
            <div class="header">
                <div class="width1190">
                    <div class="fl">您好，欢迎来到尚好房！div>
                    <div class="fr">
                        <a href="login.html">登录a> |
                        <a href="register.html">注册a> |
                        <a href="javascript:;">加入收藏a> |
                        <a href="javascript:;">设为首页a>
                    div>
                    <div class="clears">div>
                div>
            div>
            <div class="list-nav">
                <div class="width1190">
                    <div class="list"><h3>房源分类h3>div>
                    <ul class="nav">
                        <li><a href="index.html">首页a>li>
                        <li><a href="about.html">关于我们a>li>
                        <li><a href="contact.html">联系我们a>li>
                        <div class="clears">div>
                    ul>
                    <div class="clears">div>
                div>
            div>
            <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;">div>

            <div class="content">
                <div class="width1190">
                    <div class="reg-logo">
                        <form id="signupForm" method="post" action="" class="zcform">
                            <p class="clearfix">
                                <label class="one" for="phone">手机号码：label>
                                <input id="phone" type="text"
                                       class="required"
                                       style="width: 200px;" maxlength="11"
                                       v-model="registerBo.phone"
                                       placeholder="请输入您的手机号码"/>
                                <input type="button" :value="codeTest" @click="getCodeFun()" style="padding: 5px 5px;width: 100px;height: 48px;"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.phone}}span>
                            p>
                            <p class="clearfix">
                                <label class="one" for="code">验证码：label>
                                <input id="code"
                                       type="text" class="required" maxlength="4"
                                       v-model="registerBo.code" placeholder="请输入手机验证码"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.code}}span>
                            p>
                            <p class="clearfix">
                                <label class="one" for="password">登录密码：label>
                                <input id="password" type="password" maxlength="9"
                                       class="{required:true,rangelength:[8,20],}"
                                       v-model="registerBo.password" placeholder="请输入密码"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.password}}span>
                            p>
                            <p class="clearfix">
                                <label class="one" for="confirm_password">确认密码：label>
                                <input id="confirm_password" type="password" maxlength="9"
                                       class="{required:true,equalTo:'#password'}"
                                       v-model="registerBo.confirmPassword"
                                       placeholder="请再次输入密码"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.confirmPassword}}span>
                            p>
                            <p class="clearfix">
                                <label class="one" for="nickName">昵称：label>
                                <input id="nickName" type="text" maxlength="10" class="required"
                                       v-model="registerBo.nickName"
                                       placeholder="请输入您的昵称"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.nickName}}span>
                            p>
                            
                            <p class="clearfix"><input class="submit" @click="submitRegister()" type="button" value="立即注册"/>p>
                        form>
                        <div class="reg-logo-right">
                            <h3>如果您已有账号，请h3>
                            <a href="login.html" class="logo-a">立即登录a>
                        div>
                        <div class="clears">div>
                    div>
                div>
            div>

            <div class="footer">
                <div class="width1190">
                    <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a
                                                                                                                 href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
                    <div class="fr">
                        <dl>
                            <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                            <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                        dl>
                        <dl>
                            <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                            <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                        dl>
                        <div class="clears">div>
                    div>
                    <div class="clears">div>
                div>
            div>
            <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXXdiv>
            <div class="bg100">div>
        div>
        <script>
            new Vue({
                el:"#register",
                data:{
                    registerBo:{
                        phone: '',
                        password: '',
                        confirmPassword: '',
                        nickName: '',
                        code: ''
                    },
                    //校验结果
                    valid: {
                        phone: '',
                        password: '',
                        confirmPassword: '',
                        nickName: '',
                        code: ''
                    },
                    codeTest:"获取验证码",
                    sending:true, //是否能发送验证码
                    second:60
                },
                methods:{
                    //提交注册
                    submitRegister(){
                        //校验
                        var isValid = true
                        if(!(/^1[34578]\d{9}$/.test(this.registerBo.phone))) {
                            this.valid.phone = '手机号码不正确'
                            isValid = false
                        }
                        if(this.registerBo.code == '') {
                            this.valid.code = '验证码必须输入';
                            isValid = false
                        }
                        if(this.registerBo.password == '') {
                            this.valid.password = '密码必须输入';
                            isValid = false
                        }
                        if(this.registerBo.password != this.registerBo.confirmPassword) {
                            this.valid.confirmPassword = '密码不一致';
                            isValid = false
                        }
                        if(this.registerBo.nickName == '') {
                            this.valid.nickName = '昵称必须输入';
                            isValid = false
                        }
                        if(!isValid) {
                            return
                        }
                        //校验通过则发送注册请求
                        axios({
                            "url":"/userInfo/register",
                            "method":"POST",
                            "data":this.registerBo
                        }).then(response => {
                            if (response.data.code == 200) {
                                //注册成功,跳转到登录页面
                                location.href = 'login.html'
                            }else{
                                alert(response.data.message);
                            }
                        })
                    },

                    //发送验证码
                    getCodeFun() {
                        //判断当前验证码按钮是否在倒计时，如果在倒计时就不能重复发验证码
                        if (!this.sending)
                            return;

                        //使用正则表达式判断输入框中的手机号格式是否正确
                        if (!(/^1[34578]\d{9}$/.test(this.registerBo.phone))) {
                            alert('手机号码不正确');
                            return;
                        }

                        var that = this
                        //如果校验通过将发送异步请求，进行验证码的发送
                        axios.get('/userInfo/sendCode/'+this.registerBo.phone).then(function (response) {
                            //当验证码发送完毕之后，设置不能重复发送验证码
                            that.sending = false;
                            //启动倒计时
                            that.timeDown();
                        });
                    },
                    //验证码按钮倒计时
                    timeDown() {
                        //开启一个定时器，每秒执行一次
                        let result = setInterval(() => {
                            //每次循环让second的值--
                            --this.second;
                            //设置发送验证码那个按钮上的内容为倒计时的藐视
                            this.codeTest = this.second
                            //如果倒计时的秒数小于1:其实就表示倒计时要结束了
                            if (this.second < 1) {
                                //清除定时器
                                clearInterval(result);
                                //设置可以发送验证码
                                this.sending = true;
                                //还原倒计时的秒数
                                this.second = 60;
                                //再将按钮上的字还原
                                this.codeTest = "获取验证码"
                            }
                        }, 1000);
                    }
                }
            })
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

二、登录和退出登录功能

1、表现层

在web-front项目中的UserInfoController中新增

@PostMapping("/login")
public Result login(@RequestBody LoginBo loginBo,HttpSession session){
    //根据手机号查找用户，判断手机号是否正确
    UserInfo userInfo = userInfoService.getByPhone(loginBo.getPhone());
    if (userInfo == null) {
        //说明你的手机号错了!!!
        return Result.build(null,ResultCodeEnum.ACCOUNT_ERROR);
    }
    //判断账号是否被锁定了
    if (userInfo.getStatus() == 0) {
        return Result.build(null,ResultCodeEnum.ACCOUNT_LOCK_ERROR);
    }
    //判断密码是否正确
    if (!userInfo.getPassword().equals(MD5.encrypt(loginBo.getPassword()))) {
        //密码错误
        return Result.build(null,ResultCodeEnum.PASSWORD_ERROR);
    }
    //如果能走到这，说明登录成功，则将用户的信息存储到session中
    session.setAttribute("USER",userInfo);

    //将当前登录的用户信息响应给前端，让前端页面回显
    Map responseMapping = new HashMap();
    responseMapping.put("nickName",userInfo.getNickName());
    responseMapping.put("phone",userInfo.getPhone());
    return Result.ok(responseMapping);
}

@GetMapping("/logout")
public Result logout(HttpSession session){
    //从session中移除当前用户信息，或者直接销毁session
    session.invalidate();
    return Result.ok();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

2、前端页面

2.1 登录页面

在web-front项目的中创建webapp/login.html

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="Author" contect="http://www.webqin.net">
        <title>尚好房title>
        <link rel="shortcut icon" href="/static/images/favicon.ico"/>
        <link type="text/css" href="/static/css/css.css" rel="stylesheet"/>
        <script type="text/javascript" src="/static/js/jquery.js">script>
        <script type="text/javascript" src="/static/js/js.js">script>
        <script src="/static/js/vue.js">script>
        <script type="text/javascript" src="./static/js/axios.js">script>
        <script type="text/javascript" src="./static/js/util.js">script>
    head>

    <body>
        <div id="login">
            <div class="header">
                <div class="width1190">
                    <div class="fl">您好，欢迎来到尚好房！div>
                    <div class="fr">
                        <a href="login.html">登录a> |
                        <a href="register.html">注册a> |
                        <a href="javascript:;">加入收藏a> |
                        <a href="javascript:;">设为首页a>
                    div>
                    <div class="clears">div>
                div>
            div>
            <div class="list-nav">
                <div class="width1190">
                    <div class="list"><h3>房源分类h3>div>
                    <ul class="nav">
                        <li><a href="index.html">首页a>li>
                        <li><a href="about.html">关于我们a>li>
                        <li><a href="contact.html">联系我们a>li>
                        <div class="clears">div>
                    ul>
                    <div class="clears">div>
                div>
            div>
            <div class="banner" style="background:url(/static/images/ban.jpg) center center no-repeat;">div>

            <div class="content">
                <div class="width1190">
                    <div class="reg-logo">
                        <form id="signupForm" method="post" action="follow.html" class="zcform">
                            <p class="clearfix">
                                <label class="one" for="agent">手机号码：label>
                                <input id="agent" type="text"
                                       class="required"
                                       v-model="loginBo.phone"
                                       placeholder="请输入您的用户名"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.phone}}span>
                            p>
                            <p class="clearfix">
                                <label class="one" for="password">登录密码：label>
                                <input id="password" type="password"
                                       class="{required:true,rangelength:[8,20],}"
                                       v-model="loginBo.password"
                                       placeholder="请输入密码"/>
                            p>
                            <p class="clearfix">
                                <span style="color: red;margin-left: 90px;">{{valid.password}}span>
                            p>
                            
                            <p class="clearfix"><input class="submit" @click="submitLogin()" type="button" value="立即登录"/>p>
                        form>
                        <div class="reg-logo-right">
                            <h3>如果您没有账号，请h3>
                            <a href="register.html" class="logo-a">立即注册a>
                        div>
                        <div class="clears">div>
                    div>
                div>
            div>

            <div class="footer">
                <div class="width1190">
                    <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a
                                                                                                                 href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
                    <div class="fr">
                        <dl>
                            <dt><img src="/static/images/erweima.png" width="76" height="76"/>dt>
                            <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                        dl>
                        <dl>
                            <dt><img src="/static/images/erweima.png" width="76" height="76"/>dt>
                            <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                        dl>
                        <div class="clears">div>
                    div>
                    <div class="clears">div>
                div>
            div>
            <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXXdiv>
            <div class="bg100">div>
        div>
        <script>
            new Vue({
                el:"#login",
                data:{
                    valid:{
                        phone:'',
                        password:''
                    },
                    loginBo:{
                        phone:'',
                        password:''
                    }
                },
                methods:{
                    submitLogin(){
                        var isValid = true
                        //校验
                        if (this.loginBo.phone == '') {
                            this.valid.phone = '手机号不能为空'
                            isValid = false
                        }
                        if (this.loginBo.password == '') {
                            this.valid.phone = '密码不能为空'
                            isValid = false
                        }
                        if (!isValid) {
                            return
                        }

                        //登录
                        axios({
                            "url":"/userInfo/login",
                            "method":"POST",
                            "data":this.loginBo
                        }).then(response => {
                            if(response.data.code == 200){
                                //保存前端用户信息
                                //JSON.stringify(response.data.data)将json对象转成字符串
                                //{"nickname":"晴天","phone":"15999999999"}
                                //将字符串存储到sessionStorage对象中，sessionStorage它就是浏览器在会话范围内存储数据的一个对象
                                sessionStorage.setItem("userInfo",JSON.stringify(response.data.data))
                                //获取你从哪个页面过来的
                                var originUrl = util.getOriginUrl();
                                if (originUrl != '') {
                                    //跳转到原页面
                                    location.href = originUrl
                                }else {
                                    //跳转到首页
                                    location.href = 'index.html'
                                }
                            }else {
                                alert(response.data.message)
                            }
                        })
                    }
                }
            })
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

2.2 首页显示登录状态

DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房title>
    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
    <script type="text/javascript" src="./static/js/jquery.js">script>
    <script type="text/javascript" src="./static/js/js.js">script>
    <script src="static/js/vue.js">script>
    <script src="static/js/axios.js">script>
head>

<body>
<div id="list">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！div>
            <div class="fr" v-if="userInfo.nickName == ''">
                <a href="login.html">登录a> |
                <a href="register.html">注册a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎{{userInfo.nickName}}a> |
                <a href="javascript:;" @click="logout()">退出a> |
                <a href="follow.html">我的关注a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类h3>div>
            <ul class="nav">
                <li><a href="index.html">首页a>li>
                <li><a href="about.html">关于我们a>li>
                <li><a href="contact.html">联系我们a>li>
                <div class="clears">div>
            ul>
            <div class="clears">div>
        div>
    div>
    <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;">div>

    <div class="content">
        <div class="width1190">
            <form action="#" method="get" class="pro-search">
                <table>
                    <tr>
                        <th>房源区域：th>
                        <td>
                            <div style="line-height: 30px;">
                                <a href="javascript:;" @click="searchByArea('')"
                                   :class="houseQueryBo.areaId=='' ? 'pro-cur' : ''">不限a>
                                <a href="javascript:;"
                                   v-for="item in areaList"
                                   @click="searchByArea(item.id)"
                                   :class="houseQueryBo.areaId==item.id ? 'pro-cur' : ''"
                                   :key="item.id" v-text="item.name">a>
                            div>
                            
                            <div style="font-size: 12px;border-top:#ccc 1px dotted;">
                                <a href="javascript:;"
                                   @click="searchByPlate(item.id)"
                                   :class="item.id==houseQueryBo.plateId ? 'pro-cur' : ''"
                                   v-for="item in plateList"
                                   :key="item.id" v-text="item.name">a>
                            div>
                        td>
                    tr>
                    <tr>
                        <th>房型：th>
                        <td>
                            <a href="javascript:;"
                               :class="houseQueryBo.houseTypeId=='' ? 'pro-cur' : ''">不限a>
                            <a href="javascript:;"
                               @click="searchByHouseType(item.id)"
                               :class="item.id==houseQueryBo.houseTypeId ? 'pro-cur' : ''"
                               v-for="item in houseTypeList"
                               :key="item.id" v-text="item.name">a>
                        td>
                    tr>
                    <tr>
                        <th>楼层：th>
                        <td>
                            <a href="javascript:;"
                               :class="houseQueryBo.floorId=='' ? 'pro-cur' : ''">不限a>
                            <a href="javascript:;"
                               @click="searchByFloor(item.id)"
                               :class="item.id==houseQueryBo.floorId ? 'pro-cur' : ''"
                               v-for="item in floorList" :key="item.id" v-text="item.name">a>
                        td>
                    tr>
                    <tr>
                        <th>建筑结构：th>
                        <td>
                            <a href="javascript:;"
                               :class="houseQueryBo.buildStructureId=='' ? 'pro-cur' : ''">不限a>
                            <a href="javascript:;"
                               @click="searchByBuildStructure(item.id)"
                               :class="item.id==houseQueryBo.buildStructureId ? 'pro-cur' : ''"
                               v-for="item in buildStructureList" :key="item.id" v-text="item.name">a>
                        td>
                    tr>
                    <tr>
                        <th>装修情况：th>
                        <td>
                            <a href="javascript:;"
                               :class="houseQueryBo.decorationId='' ? 'pro-cur' : ''">不限a>
                            <a href="javascript:;"
                               @click="searchByDecoration(item.id)"
                               :class="item.id==houseQueryBo.decorationId ? 'pro-cur' : ''"
                               v-for="item in decorationList" :key="item.id" v-text="item.name">a>
                        td>
                    tr>
                    <tr>
                        <th>朝向：th>
                        <td>
                            <a href="javascript:;"
                               :class="houseQueryBo.directionId=='' ? 'pro-cur' : ''">不限a>
                            <a href="javascript:;"
                               @click="searchByDirection(item.id)"
                               :class="item.id==houseQueryBo.directionId ? 'pro-cur' : ''"
                               v-for="item in directionList" :key="item.id" v-text="item.name">a>
                        td>
                    tr>
                    <tr>
                        <th>房屋用途：th>
                        <td>
                            <a href="javascript:;"
                               :class="houseQueryBo.houseUseId=='' ? 'pro-cur' : ''">不限a>
                            <a href="javascript:;"
                               @click="searchByHouseUse(item.id)"
                               :class="item.id==houseQueryBo.houseUseId ? 'pro-cur' : ''"
                               v-for="item in houseUseList" :key="item.id" v-text="item.name">a>
                        td>
                    tr>
                table>
                <div class="paixu">
                    <strong>排序：strong>
                    <a href="javascript:;"
                       @click="sortDefault()"
                       :class="houseQueryBo.defaultSort==1 ? 'pro-cur' : ''">默认a>
                    <a href="javascript:;"
                       @click="sortPrice()"
                       :class="houseQueryBo.priceSort==1 ? 'pro-cur' : ''">价格 ∨a>
                    <a href="javascript:;"
                       @click="sortTime()"
                       :class="houseQueryBo.timeSort==1 ? 'pro-cur' : ''">最新 ∨a>
                div>
            form>
        div>
        <div class="width1190">
            <div class="pro-left">
                
                <dl v-for="item in page.list">
                    <dt><a :href="'info.html?id='+item.id">
                        <img :src="item.defaultImageUrl" width="286" height="188"/>a>dt>
                    <dd>
                        <h3><a :href="'info.html?id='+item.id" v-text="item.name">a>h3>
                        <div class="pro-wei">
                            <img src="./static/images/weizhi.png" width="12" height="16"/>
                            <strong class="red" v-text="item.communityName">strong>
                        div>
                        <div class="pro-fang">{{item.buildArea}}平 {{item.houseTypeName}} {{item.floorName}} {{item.directionName}}div>
                        <div class="pra-fa" >发布时间：{{item.createTimeString}}div>
                    dd>
                    <div class="price">¥ <strong v-text="item.totalPrice">strong><span class="font12">万元span>div>
                    <div class="clears">div>
                dl>
            div>
            <div class="pro-right">
                <h2 class="right-title">新上房源h2>
                <div class="right-pro">
                    <dl>
                        <dt><a href="info.html"><img src="./static/images/fang8.jpg"/>a>dt>
                        <dd>
                            <h3><a href="info.html">中装一室一厅，楼层好，采光足，稀缺房源a>h3>
                            <div class="pro-fang">一室一厅 38平 南div>
                            <div class="right-price">90万元div>
                        dd>
                    dl>
                    <dl>
                        <dt><a href="info.html"><img src="./static/images/fang7.jpg"/>a>dt>
                        <dd>
                            <h3><a href="info.html">中装两室，楼层好，采光足，稀缺房源a>h3>
                            <div class="pro-fang">两室一厅 78平 南div>
                            <div class="right-price">130万元div>
                        dd>
                    dl>
                    <dl>
                        <dt><a href="info.html"><img src="./static/images/fang6.jpg"/>a>dt>
                        <dd>
                            <h3><a href="info.html">中装三室，楼层好，采光足，稀缺房源a>h3>
                            <div class="pro-fang">三室一厅 98平 南div>
                            <div class="right-price">190万元div>
                        dd>
                    dl>
                div>
            div>
            <div class="clears">div>
            <ul class="pages">
                
                <li>
                    <a href="javascript:;" @click="findPage(page.prePage)" v-if="page.hasPreviousPage">上一页a>
                li>
                <li v-for="pageNum in page.navigatepageNums" :class="pageNum == page.pageNum ? 'page_active' : ''">
                    <a v-if="pageNum != page.pageNum" href="javascript:;" @click="findPage(pageNum)" v-text="pageNum">a>

                    <a v-if="pageNum == page.pageNum" href="javascript:;" v-text="pageNum">a>
                li>
                <li>
                    <a href="javascript:;" @click="findPage(page.nextPage)" v-if="page.hasNextPage">下一页a>
                li>
                
            ul>
        div>
    div>

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a
                    href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
            <div class="fr">
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                dl>
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                dl>
                <div class="clears">div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXXdiv>
    <div class="bg100">div>
div>
<script>
    new Vue({
        el: "#list",
        data: {
            //用户信息
            userInfo:{
                nickName:''
            },
            //区域列表
            areaList:[],
            //房型列表
            houseTypeList:[],
            //楼层列表
            floorList:[],
            //建筑结构列表
            buildStructureList:[],
            //装修情况列表
            decorationList:[],
            //朝向列表
            directionList:[],
            //房屋用途列表
            houseUseList:[],
            //板块列表
            plateList:[],
            //封装搜索条件
            houseQueryBo: {
                //区域id
                areaId: '',
                //板块id
                plateId: '',
                //房屋类型id
                houseTypeId: '',
                //楼层id
                floorId: '',
                //建筑结构id
                buildStructureId: '',
                //朝向id
                directionId: '',
                //装修情况id
                decorationId: '',
                //房屋用途id
                houseUseId: '',
                //排序规则
                defaultSort: 1,
                priceSort: null,
                timeSort: null,

            },
            //分页数据
            page: {
                //当前页的数据集合
                list: [],
                //当前页数
                pageNum: 1,
                //每页数据条数
                pageSize: 2,
                //总页数
                pages: 1,
                //页码列表
                navigatepageNums: [1,2,3,4],
                //上一页
                prePage: 0,
                //下一页
                nextPage: 0,
                //是否有上一页
                hasPreviousPage: false,
                //是否有下一页
                hasNextPage: false
            }
        },
        methods: {
            fetchDictData() {
                //获取北京的区域列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/beijing",
                    "method":"GET"
                }).then(response => {
                    this.areaList = response.data.data
                })
                //获取房型列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/houseType",
                    "method":"GET"
                }).then(response => {
                    this.houseTypeList = response.data.data
                })
                //获取楼层列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/floor",
                    "method":"GET"
                }).then(response => {
                    this.floorList = response.data.data
                })
                //获取建筑结构列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/buildStructure",
                    "method":"GET"
                }).then(response => {
                    this.buildStructureList = response.data.data
                })
                //获取装修情况列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/decoration",
                    "method":"GET"
                }).then(response => {
                    this.decorationList = response.data.data
                })
                //获取朝向列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/direction",
                    "method":"GET"
                }).then(response => {
                    this.directionList = response.data.data
                })
                //获取房屋用途列表
                axios({
                    "url":"/dict/findDictListByParentDictCode/houseUse",
                    "method":"GET"
                }).then(response => {
                    this.houseUseList = response.data.data
                })
            },
            //分页查询
            findPage(pageNum = 1){
                this.page.pageNum = pageNum
                if (pageNum < 1) pageNum = 1
                //发送异步请求获取房源分页数据
                axios({
                    "url":"/house/list/"+pageNum+"/"+this.page.pageSize,
                    "method":"POST",
                    "data":this.houseQueryBo
                }).then(response => {
                    this.page = response.data.data
                })
            },
            //根据区域搜索
            searchByArea(areaId){
                //设置搜索条件
                this.houseQueryBo.areaId = areaId
                this.houseQueryBo.plateId = ''
                //调用分页查询
                this.findPage(1)
                if (areaId == ''){
                    this.plateList = []
                    return
                }
                //获取板块列表
                axios({
                    "url":"/dict/findDictListByParentId/"+areaId,
                    "method":"GET"
                }).then(response => {
                    this.plateList = response.data.data
                })
            },
            //根据板块搜索
            searchByPlate(plateId){
                this.houseQueryBo.plateId = plateId
                this.findPage(1)
            },
            //根据房屋类型搜索
            searchByHouseType(houseTypeId){
                this.houseQueryBo.houseTypeId = houseTypeId
                this.findPage(1)
            },
            //根据楼层搜索
            searchByFloor(floorId){
                this.houseQueryBo.floorId = floorId
                this.findPage(1)
            },
            //根据房屋结构搜索
            searchByBuildStructure(buildStructureId){
                this.houseQueryBo.buildStructureId = buildStructureId
                this.findPage(1)
            },
            //根据朝向搜索
            searchByDirection(directionId){
                this.houseQueryBo.directionId = directionId
                this.findPage(1)
            },
            //根据装修情况搜索
            searchByDecoration(decorationId){
                this.houseQueryBo.decorationId = decorationId
                this.findPage(1)
            },
            //根据用途搜索
            searchByHouseUse(houseUseId){
                this.houseQueryBo.houseUseId = houseUseId
                this.findPage(1)
            },
            //默认排序
            sortDefault() {
                this.houseQueryBo.defaultSort = 1
                this.houseQueryBo.priceSort = null
                this.houseQueryBo.timeSort = null
                this.findPage(1)
            },
            //价格排序
            sortPrice() {
                this.houseQueryBo.defaultSort = null
                this.houseQueryBo.priceSort = 1
                this.houseQueryBo.timeSort = null
                this.findPage(1)
            },
            //时间排序
            sortTime() {
                this.houseQueryBo.defaultSort = null
                this.houseQueryBo.priceSort = null
                this.houseQueryBo.timeSort = 1
                this.findPage(1)
            },
            //加载用户登录的信息
            loadUserInfo(){
                //从sessionStorage中获取登录的用户数据
                var userInfoString = sessionStorage.getItem("userInfo");
                //如果获取到的登录用户数据不为空
                if (userInfoString != null && userInfoString != '') {
                    //将登录的用户数据转成json，赋给data中的userInfo
                    this.userInfo = JSON.parse(userInfoString)
                }
            },
            //退出登录
            logout(){
                axios({
                    "url":"/userInfo/logout",
                    "method":"GET"
                }).then(response => {
                    sessionStorage.removeItem("userInfo")
                    location.href = "index.html"
                })
            }
        },
        created(){
            //加载用户数据
            this.loadUserInfo()
            //初始化搜索信息
            this.fetchDictData()
            //加载第一页数据
            this.findPage(1)
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492

2.3 其它页面显示登录状态

info.html也需要显示登录状态，具体的修改方式和首页一样

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房title>
    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./static/css/swiper-bundle.min.css">
    <script type="text/javascript" src="./static/js/jquery.js">script>
    <script type="text/javascript" src="./static/js/js.js">script>
    <script src="./static/js/swiper-bundle.min.js">script>

    <script src="static/js/vue.js">script>
    <script src="static/js/axios.js">script>
    <script src="static/js/util.js">script>
    <style>
        .swiper {
            width: 100%;
            height: 100%
        }

        .swiper {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto
        }

        .swiper-slide {
            background-size: cover;
            background-position: center
        }

        .mySwiper2 {
            height: 80%;
            width: 100%
        }

        .mySwiper {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0
        }

        .mySwiper .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: .4
        }

        .mySwiper .swiper-slide-thumb-active {
            opacity: 1
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }
    style>
head>

<body>
<div id="item">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！div>
            <div class="fr" v-if="userInfo.nickName == ''">
                <a href="login.html">登录a> |
                <a href="register.html">注册a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎 {{ userInfo.nickName }}a> |
                <a href="javascript:;" @click="logout()">退出a> |
                <a href="follow.html">我的关注a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类h3>div>
            <ul class="nav">
                <li><a href="index.html">首页a>li>
                <li><a href="about.html">关于我们a>li>
                <li><a href="contact.html">联系我们a>li>
                <div class="clears">div>
            ul>
            <div class="clears">div>
        div>
    div>
    <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;">div>

    <div class="content">
        <div class="width1190" style="width:1000px;">
            <div class="proImg fl">
                

                <div style="--swiper-navigation-color: #F2F2F2; --swiper-pagination-color: #F2F2F2"
                     class="swiper mySwiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in houseImage1List" :key="item.id">
                            <img :src="item.imageUrl"/>
                        div>
                    div>
                    <div class="swiper-button-next">div>
                    <div class="swiper-button-prev">div>
                div>
                <div thumbsSlider="" class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in houseImage1List" :key="item.id">
                            <img :src="item.imageUrl"/>
                        div>
                    div>
                div>
            div>
            
            <div class="proText fr">
                <h3 class="proTitle">
                    {{house.name}}
                    <span v-if="isFollow" style="margin-left: 50px; font-size: 14px;"><a href="javascript:;">已关注a>span>
                    <span v-else style="margin-left: 50px; font-size: 14px;"><a href="javascript:;">关注a>span>
                h3>
                <div class="proText1">
                    <div class="proText1-detail-pri">
                        <strong>{{house.houseTypeName}}strong>
                        <em>{{community.buildYears}}/{{house.floorName}}em>
                    div>
                    <div class="proText1-detail-pri">
                        <strong>{{house.directionName}}strong>
                        <em>{{house.decorationName}}/板楼em>
                    div>
                    <div class="proText1-detail-pri">
                        <strong>{{house.totalPrice}}strong>
                        <em>{{house.unitPrice}}元/平 {{house.buildArea}}平方米em>
                    div>
                    <ul class="proText1-detail-oth clears">
                        <li>
                            <span>小区名称：span><a href="#">{{community.name}}a>
                        li>
                        <li>
                            <span>所在区域：span><a href="#">{{community.areaName}}a><a
                                href="#">{{community.plateName}}a>
                        li>
                        <li>
                            <span>房屋编号：span>{{house.id}}
                        li>
                    ul>
                    <div class="jingji">
                        <div class="jingji-pho">
                            <h1 class="logo">
                                <a href="javascript:;">
                                    <img :src="houseBroker.brokerHeadUrl" width="163"
                                         height="59"/>a>h1>
                        div>
                        <div class="jingji-deta">
                            <a href="javascript:;" class="projrgwc">{{houseBroker.brokerName}}a>
                            <span>本小区好评经纪人span>
                        div>
                        <a href="javascript:;" class="jingji-tel">4008758119 <span>转span>35790a>
                    div>
                div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="proBox" style="width:1000px;margin:10px auto;">
        <div class="proEq">
            
            <ul class="fl">
                <li class="proEqCur">房源信息li>
                <li>房源特色li>
                <li>户型分间li>
                <li>经纪人反馈li>
            ul>
            <div class="clears">div>
        div>
        
        <div class="proList">
            <dl class="proList-con clearf">
                <dt>基本属性dt>
                <dl>
                    <dd><span>房屋户型span>{{house.houseTypeName}}dd>
                    <dd><span>所在楼层span>{{house.floorName}}dd>
                    <dd><span>建筑面积span>{{house.buildArea}}dd>
                    <dd><span>建筑结构span>{{house.buildStructureName}}dd>
                    <dd><span>套内面积span>{{house.insideArea}}dd>
                    <dd><span>房屋朝向span>{{house.directionName}}dd>
                    <dd><span>装修情况span>{{house.decorationName}}dd>
                    <dd><span>梯户比例span>{{house.elevatorRatio}}dd>
                dl>
            dl>
            <dl class="proList-con clearf">
                <dt>交易性质dt>
                <dl>
                    <dd><span>挂牌时间span>{{house.listingDateString}}dd>
                    <dd><span>交易权属span>商品房dd>
                    <dd><span>上次交易span>{{house.lastTradeDateString}}dd>
                    <dd><span>房屋用途span>{{house.houseUseName}}dd>
                    <dd><span>房屋年限span>满五年dd>
                    <dd><span>产权所属span>共有dd>
                    <dd><span>抵押信息span>有抵押 19万元 中国银行四川分行 业主自还dd>
                    <dd><span>房本备件span>已上传房本照片dd>
                dl>
            dl>
            <div class="proList-con-war">
                特别提示：本房源所示信息仅供参考，购房时以改房屋档案登记信息、产权证信息以及所签订合同条款约定为准；本房源公示信息不作为合同条款，不具有合同约束力。
            div>
            <img :src="item.imageUrl" v-for="item in houseImage1List" :key="item.id"
                 style="width: 430px;height: 290px;"/>
        div>
        
        <div class="proList">
            <dl class="proList-con clearf">
                <dt>房源特色dt>
                <dd>
                    <a href="#" class="proList-con-icon">满五年a>
                    <a href="#" class="proList-con-icon">随时看房a>
                    <a href="#" class="proList-con-icon">VR看房a>
                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>小区介绍dt>
                <dd>
                    中国央企电建开发的，实力雄厚，品质保证。小区保安24小时巡逻，大门和楼栋均设有门禁，居住安全有保障。小区实行人车分流，配套健身设施齐全，老人和孩子可以安心享受居住环境。小区物业为开发商自己物业人员
                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>核心卖点dt>
                <dd>
                    本房满五年，卧室带有阳台，对小区中庭，采光好户型方正
                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>周边配套dt>
                <dd>
                    小区门口有多家商场，特色小吃众多，满足您绝大多数需求。1公里左右的师大现代广场休闲娱乐设施众多，充分满足您的娱乐选择。200米外即是金茶路菜市，居家买菜方便快捷。小区对门即是市政公园，在晚饭之余可以和家人朋友一期散步休憩，享受休闲。

                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>交通出行dt>
                <dd>
                    距离大面铺地铁站3.5公里（来源于百度地图）。川师成龙校区西门公交车站距离小区306米（来源于百度地图），有856路、898路。龙安村招呼站距离小区200米（来源于百度地图），有332路，313路。交通线路多，直达地铁站口，出行便捷
                dd>
            dl>
            <div class="proList-con-war">
                注：1.房源介绍中的周边配套、在建设施、规划设施、地铁信息、绿化率、得房率、容积率等信息为通过物业介绍、房产证、实勘、政府官网等渠道获取，因时间、政策会发生变化，与实际情况可能略有偏差，房源介绍仅供参考。
                2.房源介绍中与距离相关的数据均来源于百度地图。 3.土地使用起止年限详见业主土地证明材料或查询相关政府部门的登记文件。
            div>
        div>
        
        <div class="proList">
            <div class="proList-fm">
                <img src="./static/images/standard_f1ba9c2f-a917-421d-ad0f-2a6048a0d0d7.jfif" alt="">
            div>
            <div class="proList-fd">
                <table>
                    <tr>
                        <td>房间名td>
                        <td>平方td>
                        <td>朝向td>
                        <td>窗户td>
                    tr>
                    <tr>
                        <td>客厅td>
                        <td>29.76平方米td>
                        <td>无td>
                        <td>未知窗户类型td>
                    tr>
                    <tr>
                        <td>卧室Atd>
                        <td>10平方米td>
                        <td>无td>
                        <td>未知窗户类型td>
                    tr>
                    <tr>
                        <td>卧室Btd>
                        <td>13.06平方米td>
                        <td>北td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>卧室Ctd>
                        <td>7.72平方米td>
                        <td>西td>
                        <td>落地窗td>
                    tr>
                    <tr>
                        <td>厨房td>
                        <td>5.45平方米td>
                        <td>北td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>卫生间td>
                        <td>4.38平方米td>
                        <td>南td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>阳台Atd>
                        <td>2.57平方米td>
                        <td>北td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>阳台Btd>
                        <td>4.81平方米td>
                        <td>北 东td>
                        <td>普通窗td>
                    tr>
                table>
            div>
            <div class="clears">div>
        div>
        
        <div class="proList">
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/d61bd0db-9b94-4199-85e1-8360606f9c99.jpg.480x640.jpg.55x55.jpg" alt="">
                dt>
                <dd>
                    <div>
                        <a href="#">王琢a>
                        <span>4008897069转34851span>
                    div>
                    <p>
                        房屋所在楼盘电建地产云立方，我带看过此房，了解房屋相关信息。房屋三梯八户，，产权面积88平米，装修三房，卧室有阳台周边配套齐全，生活、出行便利。更多详情，欢迎来电咨询。竭诚为您服务，只为您找到满意的家！
                    p>
                    <div>
                        2022/01/13 带客户看过此房，共带看本房3次
                    div>
                dd>
            dl>
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/adb503d4-3b05-4574-a61a-e5efbd39ec47.png.480x640.jpg.55x55.jpg" alt="">
                dt>
                <dd>
                    <div>
                        <a href="#">文辉a>
                        <span>4008896851转37783span>
                    div>
                    <p>
                        云立方套三单卫，低楼层，简单装修，对小区中庭，客厅带飘窗，主卧室带阳台，户型方正，有钥匙，可以实地看房。
                    p>
                    <div>
                        2022/01/01 带客户看过此房，共带看本房1次
                    div>
                dd>
            dl>
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/832c9fdc-e770-416d-8ae4-cc17e294049e.jpg.480x640.jpg.55x55.jpg" alt="">
                dt>
                <dd>
                    <div>
                        <a href="#">常新文a>
                        <span>4008897038转86910span>
                    div>
                    <p>
                        本房满五年，卧室带有阳台，对小区中庭，采光好户型方正
                    p>
                    <div>
                        2021/12/26 带客户看过此房，共带看本房1次
                    div>
                dd>
            dl>
        div>
    div>

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a
                    href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
            <div class="fr">
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                dl>
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                dl>
                <div class="clears">div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXXdiv>
    <div class="bg100">div>
div>
<script>
    new Vue({
        el: "#item",
        data: {
            id: null,
            isLoad: false,
            community: {},
            house: {},
            houseBroker: {},
            houseImage1List: [],
            isFollow: false,
            userInfo:{
                nickName:''
            }
        },

        created() {
            this.init()
            this.loadUserInfo()
        },

        mounted() {
            const timer = setInterval(() => {
                // 图片加载成功，再去初始化轮播图
                if (this.isLoad) {
                    this.runSwiper()
                    clearInterval(timer);
                }
            }, 500);
        },

        methods: {
            runSwiper() {
                var swiper = new Swiper(".mySwiper", {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true
                })
                new Swiper(".mySwiper2", {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    thumbs: {
                        swiper: swiper
                    }
                })
            },

            init() {
                this.id = util.getQueryVariable("id")
                this.fetchData()
            },

            fetchData() {
                axios({
                    "url": "/house/info/" + this.id,
                    "method": "GET"
                }).then(response => {
                    this.house = response.data.data.house
                    this.community = response.data.data.community
                    this.houseBroker = response.data.data.houseBrokerList[0]
                    this.houseImage1List = response.data.data.houseImage1List
                    this.isFollow = response.data.data.isFollow
                    this.isLoad = true
                })
            },
            //加载用户登录的信息
            loadUserInfo(){
                var userInfoString = sessionStorage.getItem("userInfo");
                if (userInfoString != null && userInfoString != '') {
                    this.userInfo = JSON.parse(userInfoString)
                }
            },
            //退出登录
            logout(){
                axios({
                    "url":"/userInfo/logout",
                    "method":"GET"
                }).then(response => {
                    sessionStorage.removeItem("userInfo")
                    location.href = "index.html"
                })
            }
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491

三、关注功能

1、添加关注

1.1 持久层

1.1.1 UserFollowMapper接口

在service-user项目中创建com.atguigu.mapper.UserFollowMapper接口

public interface UserFollowMapper{
    /**
     * 根据用户id和房源id查询关注信息
     * @param userId
     * @param houseId
     * @return
     */
    UserFollow findByUserIdAndHouseId(@Param("userId") Long userId,@Param("houseId") Long houseId);
    /**
     * 更新房源关注信息
     * @param userFollow
     */
    void update(UserFollow userFollow);

    /**
     * 新增关注信息
     * @param userFollow
     */
    void insert(UserFollow userFollow);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

1.1.2 UserFollowMapper.xml映射配置文件

DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.atguigu.mapper.UserFollowMapper">
    <sql id="columns">
        select id,user_id,house_id,create_time,update_time,is_deleted
    sql>
    <select id="findByUserIdAndHouseId" resultType="UserFollow">
        <include refid="columns">include>
        from user_follow where user_id=#{userId} and house_id=#{houseId}
    select>

    <update id="update">
        update user_follow set is_deleted=#{isDeleted},update_time=now() where id=#{id}
    update>

    <insert id="insert">
        insert into user_follow (user_id,house_id) values (#{userId},#{houseId})
    insert>
mapper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1.2 业务层

1.2.1 UserFollowService接口

在service-api项目中创建com.atguigu.service.UserFollowService接口

/**
 * 包名:com.atguigu.service
 *
 * @author Leevi
 * 日期2022-05-25  11:41
 */
public interface UserFollowService {
    /**
     * 根据用户id和房源id查询关注信息
     * @param userId
     * @param houseId
     * @return
     */
    UserFollow findByUserIdAndHouseId(Long userId, Long houseId);

    /**
     * 更新房源的关注信息
     * @param userFollow
     */
    void update(UserFollow userFollow);

    /**
     * 新增关注信息
     * @param userFollow
     */
    void insert(UserFollow userFollow);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

1.2.2 UserFollowServiceImpl实现类

在service-user项目中创建com.atguigu.service.impl.UserFollowServiceImpl实现类

@Transactional
@Service(interfaceClass = UserFollowService.class)
public class UserFollowServiceImpl implements UserFollowService {
    @Autowired
    private UserFollowMapper userFollowMapper;

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public UserFollow findByUserIdAndHouseId(Long userId, Long houseId) {

        return userFollowMapper.findByUserIdAndHouseId(userId,houseId);
    }

    @Override
    public void update(UserFollow userFollow) {
        userFollowMapper.update(userFollow);
    }

    @Override
    public void insert(UserFollow userFollow) {
        userFollowMapper.insert(userFollow);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1.3 表现层

在web-front中创建UserFollowController类

@RestController
@RequestMapping("/userFollow")
public class UserFollowController {
    @Reference
    private UserFollowService userFollowService;

    @GetMapping("/auth/follow/{houseId}")
    public Result addFollow(@PathVariable("houseId") Long houseId, HttpSession session){
        //1. 判断用户之前是否已经添加过这条数据的关注:根据用户id和房源id查询出UserFollow
        //1.1 获取当前登录的用户
        UserInfo userInfo = (UserInfo) session.getAttribute("USER");
        UserFollow userFollow = userFollowService.findByUserIdAndHouseId(userInfo.getId(),houseId);
        //2.如果用户之前已经添加过关注，那么我们只需要更新这条数据的is_deleted为0

        if (userFollow != null) {
            //说明用户之前关注过
            userFollow.setIsDeleted(0);
            //更新关注
            userFollowService.update(userFollow);
        }else {
            //3. 如果用户之前没有添加过关注，我们需要新增一条数据
            userFollow = new UserFollow();
            userFollow.setUserId(userInfo.getId());
            userFollow.setHouseId(houseId);
            userFollowService.insert(userFollow);
        }

        return Result.ok();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

1.4 前端页面

在web-front项目的info.html中绑定点击事件

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房title>
    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
    <link rel="stylesheet" href="./static/css/swiper-bundle.min.css">
    <script type="text/javascript" src="./static/js/jquery.js">script>
    <script type="text/javascript" src="./static/js/js.js">script>
    <script src="./static/js/swiper-bundle.min.js">script>

    <script src="static/js/vue.js">script>
    <script src="static/js/axios.js">script>
    <script src="static/js/util.js">script>
    <style>
        .swiper {
            width: 100%;
            height: 100%
        }

        .swiper {
            width: 100%;
            height: 300px;
            margin-left: auto;
            margin-right: auto
        }

        .swiper-slide {
            background-size: cover;
            background-position: center
        }

        .mySwiper2 {
            height: 80%;
            width: 100%
        }

        .mySwiper {
            height: 20%;
            box-sizing: border-box;
            padding: 10px 0
        }

        .mySwiper .swiper-slide {
            width: 25%;
            height: 100%;
            opacity: .4
        }

        .mySwiper .swiper-slide-thumb-active {
            opacity: 1
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }
    style>
head>

<body>
<div id="item">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！div>
            <div class="fr" v-if="userInfo.nickName == ''">
                <a href="login.html">登录a> |
                <a href="register.html">注册a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎 {{ userInfo.nickName }}a> |
                <a href="javascript:;" @click="logout()">退出a> |
                <a href="follow.html">我的关注a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类h3>div>
            <ul class="nav">
                <li><a href="index.html">首页a>li>
                <li><a href="about.html">关于我们a>li>
                <li><a href="contact.html">联系我们a>li>
                <div class="clears">div>
            ul>
            <div class="clears">div>
        div>
    div>
    <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;">div>

    <div class="content">
        <div class="width1190" style="width:1000px;">
            <div class="proImg fl">
                

                <div style="--swiper-navigation-color: #F2F2F2; --swiper-pagination-color: #F2F2F2"
                     class="swiper mySwiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in houseImage1List" :key="item.id">
                            <img :src="item.imageUrl"/>
                        div>
                    div>
                    <div class="swiper-button-next">div>
                    <div class="swiper-button-prev">div>
                div>
                <div thumbsSlider="" class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in houseImage1List" :key="item.id">
                            <img :src="item.imageUrl"/>
                        div>
                    div>
                div>
            div>
            
            <div class="proText fr">
                <h3 class="proTitle">
                    {{house.name}}
                    <span v-if="isFollow" style="margin-left: 50px; font-size: 14px;"><a href="javascript:;">已关注a>span>
                    <span v-else style="margin-left: 50px; font-size: 14px;"><a href="javascript:;" @click="addFollow()">关注a>span>
                h3>
                <div class="proText1">
                    <div class="proText1-detail-pri">
                        <strong>{{house.houseTypeName}}strong>
                        <em>{{community.buildYears}}/{{house.floorName}}em>
                    div>
                    <div class="proText1-detail-pri">
                        <strong>{{house.directionName}}strong>
                        <em>{{house.decorationName}}/板楼em>
                    div>
                    <div class="proText1-detail-pri">
                        <strong>{{house.totalPrice}}strong>
                        <em>{{house.unitPrice}}元/平 {{house.buildArea}}平方米em>
                    div>
                    <ul class="proText1-detail-oth clears">
                        <li>
                            <span>小区名称：span><a href="#">{{community.name}}a>
                        li>
                        <li>
                            <span>所在区域：span><a href="#">{{community.areaName}}a><a
                                href="#">{{community.plateName}}a>
                        li>
                        <li>
                            <span>房屋编号：span>{{house.id}}
                        li>
                    ul>
                    <div class="jingji">
                        <div class="jingji-pho">
                            <h1 class="logo">
                                <a href="javascript:;">
                                    <img :src="houseBroker.brokerHeadUrl" width="163"
                                         height="59"/>a>h1>
                        div>
                        <div class="jingji-deta">
                            <a href="javascript:;" class="projrgwc">{{houseBroker.brokerName}}a>
                            <span>本小区好评经纪人span>
                        div>
                        <a href="javascript:;" class="jingji-tel">4008758119 <span>转span>35790a>
                    div>
                div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="proBox" style="width:1000px;margin:10px auto;">
        <div class="proEq">
            
            <ul class="fl">
                <li class="proEqCur">房源信息li>
                <li>房源特色li>
                <li>户型分间li>
                <li>经纪人反馈li>
            ul>
            <div class="clears">div>
        div>
        
        <div class="proList">
            <dl class="proList-con clearf">
                <dt>基本属性dt>
                <dl>
                    <dd><span>房屋户型span>{{house.houseTypeName}}dd>
                    <dd><span>所在楼层span>{{house.floorName}}dd>
                    <dd><span>建筑面积span>{{house.buildArea}}dd>
                    <dd><span>建筑结构span>{{house.buildStructureName}}dd>
                    <dd><span>套内面积span>{{house.insideArea}}dd>
                    <dd><span>房屋朝向span>{{house.directionName}}dd>
                    <dd><span>装修情况span>{{house.decorationName}}dd>
                    <dd><span>梯户比例span>{{house.elevatorRatio}}dd>
                dl>
            dl>
            <dl class="proList-con clearf">
                <dt>交易性质dt>
                <dl>
                    <dd><span>挂牌时间span>{{house.listingDateString}}dd>
                    <dd><span>交易权属span>商品房dd>
                    <dd><span>上次交易span>{{house.lastTradeDateString}}dd>
                    <dd><span>房屋用途span>{{house.houseUseName}}dd>
                    <dd><span>房屋年限span>满五年dd>
                    <dd><span>产权所属span>共有dd>
                    <dd><span>抵押信息span>有抵押 19万元 中国银行四川分行 业主自还dd>
                    <dd><span>房本备件span>已上传房本照片dd>
                dl>
            dl>
            <div class="proList-con-war">
                特别提示：本房源所示信息仅供参考，购房时以改房屋档案登记信息、产权证信息以及所签订合同条款约定为准；本房源公示信息不作为合同条款，不具有合同约束力。
            div>
            <img :src="item.imageUrl" v-for="item in houseImage1List" :key="item.id"
                 style="width: 430px;height: 290px;"/>
        div>
        
        <div class="proList">
            <dl class="proList-con clearf">
                <dt>房源特色dt>
                <dd>
                    <a href="#" class="proList-con-icon">满五年a>
                    <a href="#" class="proList-con-icon">随时看房a>
                    <a href="#" class="proList-con-icon">VR看房a>
                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>小区介绍dt>
                <dd>
                    中国央企电建开发的，实力雄厚，品质保证。小区保安24小时巡逻，大门和楼栋均设有门禁，居住安全有保障。小区实行人车分流，配套健身设施齐全，老人和孩子可以安心享受居住环境。小区物业为开发商自己物业人员
                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>核心卖点dt>
                <dd>
                    本房满五年，卧室带有阳台，对小区中庭，采光好户型方正
                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>周边配套dt>
                <dd>
                    小区门口有多家商场，特色小吃众多，满足您绝大多数需求。1公里左右的师大现代广场休闲娱乐设施众多，充分满足您的娱乐选择。200米外即是金茶路菜市，居家买菜方便快捷。小区对门即是市政公园，在晚饭之余可以和家人朋友一期散步休憩，享受休闲。

                dd>
            dl>
            <dl class="proList-con clearf">
                <dt>交通出行dt>
                <dd>
                    距离大面铺地铁站3.5公里（来源于百度地图）。川师成龙校区西门公交车站距离小区306米（来源于百度地图），有856路、898路。龙安村招呼站距离小区200米（来源于百度地图），有332路，313路。交通线路多，直达地铁站口，出行便捷
                dd>
            dl>
            <div class="proList-con-war">
                注：1.房源介绍中的周边配套、在建设施、规划设施、地铁信息、绿化率、得房率、容积率等信息为通过物业介绍、房产证、实勘、政府官网等渠道获取，因时间、政策会发生变化，与实际情况可能略有偏差，房源介绍仅供参考。
                2.房源介绍中与距离相关的数据均来源于百度地图。 3.土地使用起止年限详见业主土地证明材料或查询相关政府部门的登记文件。
            div>
        div>
        
        <div class="proList">
            <div class="proList-fm">
                <img src="./static/images/standard_f1ba9c2f-a917-421d-ad0f-2a6048a0d0d7.jfif" alt="">
            div>
            <div class="proList-fd">
                <table>
                    <tr>
                        <td>房间名td>
                        <td>平方td>
                        <td>朝向td>
                        <td>窗户td>
                    tr>
                    <tr>
                        <td>客厅td>
                        <td>29.76平方米td>
                        <td>无td>
                        <td>未知窗户类型td>
                    tr>
                    <tr>
                        <td>卧室Atd>
                        <td>10平方米td>
                        <td>无td>
                        <td>未知窗户类型td>
                    tr>
                    <tr>
                        <td>卧室Btd>
                        <td>13.06平方米td>
                        <td>北td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>卧室Ctd>
                        <td>7.72平方米td>
                        <td>西td>
                        <td>落地窗td>
                    tr>
                    <tr>
                        <td>厨房td>
                        <td>5.45平方米td>
                        <td>北td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>卫生间td>
                        <td>4.38平方米td>
                        <td>南td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>阳台Atd>
                        <td>2.57平方米td>
                        <td>北td>
                        <td>普通窗td>
                    tr>
                    <tr>
                        <td>阳台Btd>
                        <td>4.81平方米td>
                        <td>北 东td>
                        <td>普通窗td>
                    tr>
                table>
            div>
            <div class="clears">div>
        div>
        
        <div class="proList">
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/d61bd0db-9b94-4199-85e1-8360606f9c99.jpg.480x640.jpg.55x55.jpg" alt="">
                dt>
                <dd>
                    <div>
                        <a href="#">王琢a>
                        <span>4008897069转34851span>
                    div>
                    <p>
                        房屋所在楼盘电建地产云立方，我带看过此房，了解房屋相关信息。房屋三梯八户，，产权面积88平米，装修三房，卧室有阳台周边配套齐全，生活、出行便利。更多详情，欢迎来电咨询。竭诚为您服务，只为您找到满意的家！
                    p>
                    <div>
                        2022/01/13 带客户看过此房，共带看本房3次
                    div>
                dd>
            dl>
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/adb503d4-3b05-4574-a61a-e5efbd39ec47.png.480x640.jpg.55x55.jpg" alt="">
                dt>
                <dd>
                    <div>
                        <a href="#">文辉a>
                        <span>4008896851转37783span>
                    div>
                    <p>
                        云立方套三单卫，低楼层，简单装修，对小区中庭，客厅带飘窗，主卧室带阳台，户型方正，有钥匙，可以实地看房。
                    p>
                    <div>
                        2022/01/01 带客户看过此房，共带看本房1次
                    div>
                dd>
            dl>
            <dl class="proList-jingjiL clearf">
                <dt>
                    <img src="./static/images/832c9fdc-e770-416d-8ae4-cc17e294049e.jpg.480x640.jpg.55x55.jpg" alt="">
                dt>
                <dd>
                    <div>
                        <a href="#">常新文a>
                        <span>4008897038转86910span>
                    div>
                    <p>
                        本房满五年，卧室带有阳台，对小区中庭，采光好户型方正
                    p>
                    <div>
                        2021/12/26 带客户看过此房，共带看本房1次
                    div>
                dd>
            dl>
        div>
    div>

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a
                    href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
            <div class="fr">
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                dl>
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/>dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布dd>
                dl>
                <div class="clears">div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXXdiv>
    <div class="bg100">div>
div>
<script>
    new Vue({
        el: "#item",
        data: {
            id: null,
            isLoad: false,
            community: {},
            house: {},
            houseBroker: {},
            houseImage1List: [],
            isFollow: false,
            userInfo:{
                nickName:''
            }
        },

        created() {
            this.init()
            this.loadUserInfo()
        },

        mounted() {
            const timer = setInterval(() => {
                // 图片加载成功，再去初始化轮播图
                if (this.isLoad) {
                    this.runSwiper()
                    clearInterval(timer);
                }
            }, 500);
        },

        methods: {
            runSwiper() {
                var swiper = new Swiper(".mySwiper", {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true
                })
                new Swiper(".mySwiper2", {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    },
                    thumbs: {
                        swiper: swiper
                    }
                })
            },

            init() {
                this.id = util.getQueryVariable("id")
                this.fetchData()
            },

            fetchData() {
                axios({
                    "url": "/house/info/" + this.id,
                    "method": "GET"
                }).then(response => {
                    this.house = response.data.data.house
                    this.community = response.data.data.community
                    this.houseBroker = response.data.data.houseBrokerList[0]
                    this.houseImage1List = response.data.data.houseImage1List
                    this.isFollow = response.data.data.isFollow
                    this.isLoad = true
                })
            },
            //加载用户登录的信息
            loadUserInfo(){
                var userInfoString = sessionStorage.getItem("userInfo");
                if (userInfoString != null && userInfoString != '') {
                    this.userInfo = JSON.parse(userInfoString)
                }
            },
            //退出登录
            logout(){
                axios({
                    "url":"/userInfo/logout",
                    "method":"GET"
                }).then(response => {
                    sessionStorage.removeItem("userInfo")
                    location.href = "index.html"
                })
            },
            addFollow(){
                axios({
                    "url":"/userFollow/auth/follow/"+this.id,
                    "method":"GET"
                }).then(response => {
                    //如果没登录，拦截器会返回208状态，跳转登录页面
                    if (response.data.code == 208) {
                        location.href = 'login.html?originUrl='+location.href
                    } else {
                        this.isFollow = true
                    }
                })
            }
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504

1.5 定义拦截器判断登录

1.5.1 创建拦截器

在web-front项目中创建com.atguigu.interceptor.LoginInterceptor

package com.atguigu.interceptor;

import com.atguigu.result.Result;
import com.atguigu.result.ResultCodeEnum;
import com.atguigu.util.WebUtil;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 包名:com.atguigu.interceptor
 *
 * @author Leevi
 * 日期2022-03-30  20:53
 */
public class LoginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        //判断是否已登录
        if (request.getSession().getAttribute("USER") == null) {
            //未登录
            WebUtil.writeJSON(response,Result.build("未登录", ResultCodeEnum.LOGIN_AUTH));
            return false;
        }
        return true;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

1.5.2 配置拦截器

修改web-front项目中的resources/spring/spring-mvc.xml

<mvc:interceptors>
    <mvc:interceptor>
        <mvc:mapping path="/**/auth/**"/>
        <bean class="com.atguigu.interceptor.LoginInterceptor"/>
    mvc:interceptor>
mvc:interceptors>
1
2
3
4
5
6
7

2、进入info.html判断是否已关注

2.1 表现层

调整HouseController类info方法

@Reference
private UserFollowService userFollowService;

@GetMapping("/info/{id}")
public Result info(@PathVariable("id") Long id, HttpSession session){
    //1. 根据房源id获取房源信息
    House house = houseService.getById(id);
    //2.根据小区id获取小区信息
    Community community = communityService.getById(house.getCommunityId());
    //3.根据房源id查询房源经纪人列表
    List<HouseBroker> houseBrokerList = houseBrokerService.findHouseBrokerListByHouseId(id);
    //4.根据房源id查询房源图片列表
    List<HouseImage> houseImageList = houseImageService.findHouseImageList(id, 1);
    //5.根据房源id查询房东列表
    List<HouseUser> houseUserList = houseUserService.findHouseUserListByHouseId(id);
    //6.查询当前用户是否已关注该房源
    //6.1 获取当前用户
    UserInfo userInfo = (UserInfo) session.getAttribute("USER");
    boolean isFollow = false;
    //当然:不一定登录了，所以我们要判断userInfo是否为空
    if (userInfo != null) {
        //判断当前用户是否已关注当前房源
        //调用UserFollowService的方法查询用户是否已关注房源
        UserFollow userFollow = userFollowService.findByUserIdAndHouseId(userInfo.getId(), id);
        if (userFollow != null && userFollow.getIsDeleted() == 0) {
            //已关注
            isFollow= true;
        }
    }
    Map resultMap = new HashMap();
    resultMap.put("house",house);
    resultMap.put("community",community);
    resultMap.put("houseBrokerList",houseBrokerList);
    resultMap.put("houseImage1List",houseImageList);
    resultMap.put("houseUserList",houseUserList);
    resultMap.put("isFollow",isFollow);

    //7. 封装数据进行响应
    return Result.ok(resultMap);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

3、分页显示用户关注列表

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ixelGyP-1661871559229)(images/08/img_001.png)]

3.1 持久层

3.1.1 UserFollowMapper接口

/**
     * 分页查询用户的关注列表
     * @param userId
     * @return
     */
Page<UserFollowVo> findListPage(@Param("userId") Long userId);
1
2
3
4
5
6

3.1.2 UserFollowMapper.xml映射配置文件

<select id="findListPage" resultType="UserFollowVo">
    select
    
    uf.id,uf.house_id,uf.update_time,
    
    hh.build_area,hh.direction_id,hh.floor_id,hh.name,hh.unit_price,hh.default_image_url,hh.total_price,
    
    hc.name communityName,
    
    (select name from hse_dict where id=hh.house_type_id) houseTypeName,
    (select name from hse_dict where id=hh.floor_id) floorName,
    (select name from hse_dict where id=hh.direction_id) directionName
    from user_follow uf
    left join hse_house hh on uf.house_id=hh.id
    left join hse_community hc on hh.community_id=hc.id
    where
    uf.is_deleted = 0
    and hh.is_deleted = 0
    and hc.is_deleted = 0
    
    and user_id=#{userId}

    order by uf.id desc
select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.2 业务层

3.2.1 UserFollowService接口

/**
     * 分页查询用户关注列表
     * @param pageNum
     * @param pageSize
     * @param userId
     * @return
     */
PageInfo<UserFollowVo> findListPage(int pageNum, int pageSize, Long userId);
1
2
3
4
5
6
7
8

3.2.2 UserFollowServiceImpl实现类

@Override
    public PageInfo<UserFollowVo> findListPage(int pageNum, int pageSize, Long userId) {
        PageHelper.startPage(pageNum,pageSize);
        return new PageInfo<>(userFollowMapper.findListPage(userId),10);
    }
1
2
3
4
5

3.3 表现层

UserFollowController添加方法

@GetMapping(value = "/auth/list/{pageNum}/{pageSize}")
public Result findListPage(@PathVariable("pageNum") Integer pageNum,
                           @PathVariable("pageSize") Integer pageSize,
                           HttpSession session){
    UserInfo userInfo = (UserInfo) session.getAttribute("USER");
    PageInfo<UserFollowVo> pageInfo = userFollowService.findListPage(pageNum, pageSize, userInfo.getId());
    return Result.ok(pageInfo);
}
1
2
3
4
5
6
7
8

3.4 前端页面

在web-front项目中创建webapp/follow.html

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房title>
    <link rel="shortcut icon" href="/static/images/favicon.ico" />
    <link type="text/css" href="/static/css/css.css" rel="stylesheet" />
    <script type="text/javascript" src="/static/js/jquery.js">script>
    <script type="text/javascript" src="/static/js/js.js">script>
    <script src="/static/js/vue.js">script>
    <script src="/static/js/axios.js">script>
head>

<body>
<div id="follow">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！div>
            <div class="fr" v-if="userInfo.nickName == ''">
                <a href="login.html">登录a> |
                <a href="register.html">注册a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎 {{ userInfo.nickName }}a> |
                <a href="javascript:;" @click="logout">退出a> |
                <a href="follow.html">我的关注a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list">
                <h3>房源分类h3>
            div>
            <ul class="nav">
                <li><a href="index.html">首页a>li>
                <li><a href="about.html">关于我们a>li>
                <li><a href="contact.html">联系我们a>li>
                <div class="clears">div>
            ul>
            <div class="clears">div>
        div>
    div>
    <div class="banner" style="background:url(/static/images/ban.jpg) center center no-repeat;">div>

    <div class="content">
        <div class="width1190">
            <div class="vip-left">
                <div class="vipNav">
                    <h3 class="vipTitle">会员中心h3>
                    <dl>
                        <dt class="vipIcon3">账户设置dt>
                        <dd>
                            <a href="javascript:;">我的资料a>
                            <a href="javascript:;">账户密码设置a>
                        dd>
                        <dt class="vipIcon1">我的尚好房dt>
                        <dd>
                            <a href="follow.html" class="vipNavCur">关注房源a>
                            <a href="javascript:;">申请社区自由经纪人a>
                            <a href="javascript:;">社区自由经纪人a>
                        dd>
                    dl>
                div>
            div>
            <div class="vip-right">
                <h3 class="vipright-title">关注房源h3>
                <ul class="guanzhueq">
                    <li class="guanzhueqcur"><a href="javascript:;">二手房a>li>
                    <div class="clearfix">div>
                ul>
                <div class="guanzhulist">
                    <dl v-for="item in page.list" :key="item.id">
                        <dt><a :href="'info.html?id='+item.houseId"><img :src="item.defaultImageUrl" width="190" height="128" />a>dt>
                        <dd>
                            <h3><a :href="'info.html?id='+item.houseId">{{ item.name }}a>h3>
                            <div class="guantext">{{ item.buildArea }}平 {{ item.houseTypeName}} {{ item.floorName}} {{ item.directionName}}div>
                            <div class="guantext2">关注时间：{{ item.updateTimeString}}    <a href="javascript:;" class="qxgz" @click="cancelFollow(item.id)">取消关注a>div>
                        dd>
                        <div class="price">¥ <strong>{{ item.totalPrice }}strong><span class="font12">万元span>div>
                        <div class="clearfix">div>
                    dl>
                div>
                <div class="clears">div>
                <ul class="pages">
                    <li>
                        <a href="javascript:;" @click="findPageList(page.prePage)" v-if="page.hasPreviousPage">上一页a>
                    li>
                    <li v-for="item in page.navigatepageNums" :class="item==page.pageNum ? 'page_active' : ''">
                        <a href="javascript:;" @click="findPageList(item)">{{ item }}a>
                    li>
                    <li>
                        <a href="javascript:;" @click="findPageList(page.nextPage)" v-if="page.hasNextPage">下一页a>
                    li>
                ul>
            div>
            <div class="clearfix">div>
        div>
    div>

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
            <div class="fr">
                <dl>
                    <dt><img src="/static/images/erweima.png" width="76" height="76" />dt>
                    <dd>微信扫一扫<br />房价点评，精彩发布dd>
                dl>
                <dl>
                    <dt><img src="/static/images/erweima.png" width="76" height="76" />dt>
                    <dd>微信扫一扫<br />房价点评，精彩发布dd>
                dl>
                <div class="clears">div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXX div>
    <div class="bg100">div>
div>
<script>
    var app =new Vue({
        el: '#follow',

        data: {
            //接口返回的分页数据，在此声明
            page: {
                list: [],
                pageNum: 1,
                pageSize: 2,
                pages: 1,
                navigatepageNums: [1,2,3,4],
                prePage: 0,
                nextPage: 0,
                hasPreviousPage: false,
                hasNextPage: false
            },

            userInfo: {
                nickName: ''
            }
        },

        mounted () {
            this.findPageList(1)
            this.loadUserInfo()
        },

        methods: {
            loadUserInfo() {
                let userInfoString = window.sessionStorage.getItem("userInfo")
                if(userInfoString != null && userInfoString != '') {
                    this.userInfo = JSON.parse(userInfoString)
                }
            },
            //退出登录
            logout(){
                axios({
                    "url":"/userInfo/logout",
                    "method":"GET"
                }).then(response => {
                    sessionStorage.removeItem("userInfo")
                    location.href = "index.html"
                })
            },
            //分页查询数据
            findPageList(pageNum = 1) {
                if(pageNum < 1) pageNum = 1
                if(pageNum >= this.pages) pageNum = this.pages

                axios({
                    "url":"/userFollow/auth/list/"+pageNum+"/"+this.page.pageSize,
                    "method":"GET"
                }).then(response => {
                    if (response.data.code == 208) {
                        location.href = 'login.html?originUrl='+location.href
                    } else {
                        this.page = response.data.data
                    }
                })
            },
            //取消关注
            cancelFollow(id) {
                //发送异步请求, id是关注表中的id字段的值
                axios({
                    "url":"/userFollow/auth/cancelFollow/"+id,
                    "method":"GET"
                }).then(response => {
                    //如果没登录，拦截器会返回208状态，跳转登录页面
                    if (response.data.code == 208) {
                        location.href = 'login.html?originUrl='+location.href
                    } else {
                        this.findPageList(1)
                    }
                })
            }
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

4、取消关注

4.1 表现层

UserFollowController

@GetMapping("/auth/cancelFollow/{id}")
public Result cancelFollow(@PathVariable("id") Long id){
    //创建UserFollow对象
    UserFollow userFollow = new UserFollow();
    userFollow.setId(id);
    userFollow.setIsDeleted(1);
    //调用业务层的方法修改
    userFollowService.update(userFollow);

    return Result.ok();
}
1
2
3
4
5
6
7
8
9
10
11

4.4 前端页面

在follow.html中绑定点击事件

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房title>
    <link rel="shortcut icon" href="/static/images/favicon.ico" />
    <link type="text/css" href="/static/css/css.css" rel="stylesheet" />
    <script type="text/javascript" src="/static/js/jquery.js">script>
    <script type="text/javascript" src="/static/js/js.js">script>
    <script src="/static/js/vue.js">script>
    <script src="/static/js/axios.js">script>
head>

<body>
<div id="follow">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！div>
            <div class="fr" v-if="userInfo.nickName == ''">
                <a href="login.html">登录a> |
                <a href="register.html">注册a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎 {{ userInfo.nickName }}a> |
                <a href="javascript:;" @click="logout">退出a> |
                <a href="follow.html">我的关注a> |
                <a href="javascript:;">加入收藏a> |
                <a href="javascript:;">设为首页a>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list">
                <h3>房源分类h3>
            div>
            <ul class="nav">
                <li><a href="index.html">首页a>li>
                <li><a href="about.html">关于我们a>li>
                <li><a href="contact.html">联系我们a>li>
                <div class="clears">div>
            ul>
            <div class="clears">div>
        div>
    div>
    <div class="banner" style="background:url(/static/images/ban.jpg) center center no-repeat;">div>

    <div class="content">
        <div class="width1190">
            <div class="vip-left">
                <div class="vipNav">
                    <h3 class="vipTitle">会员中心h3>
                    <dl>
                        <dt class="vipIcon3">账户设置dt>
                        <dd>
                            <a href="javascript:;">我的资料a>
                            <a href="javascript:;">账户密码设置a>
                        dd>
                        <dt class="vipIcon1">我的尚好房dt>
                        <dd>
                            <a href="follow.html" class="vipNavCur">关注房源a>
                            <a href="javascript:;">申请社区自由经纪人a>
                            <a href="javascript:;">社区自由经纪人a>
                        dd>
                    dl>
                div>
            div>
            <div class="vip-right">
                <h3 class="vipright-title">关注房源h3>
                <ul class="guanzhueq">
                    <li class="guanzhueqcur"><a href="javascript:;">二手房a>li>
                    <div class="clearfix">div>
                ul>
                <div class="guanzhulist">
                    <dl v-for="item in page.list" :key="item.id">
                        <dt><a :href="'info.html?id='+item.houseId"><img :src="item.defaultImageUrl" width="190" height="128" />a>dt>
                        <dd>
                            <h3><a :href="'info.html?id='+item.houseId">{{ item.name }}a>h3>
                            <div class="guantext">{{ item.buildArea }}平 {{ item.houseTypeName}} {{ item.floorName}} {{ item.directionName}}div>
                            <div class="guantext2">关注时间：{{ item.createTime}}    <a href="javascript:;" class="qxgz" @click="cancelFollow(item.id)">取消关注a>div>
                        dd>
                        <div class="price">¥ <strong>{{ item.totalPrice }}strong><span class="font12">万元span>div>
                        <div class="clearfix">div>
                    dl>
                div>
                <div class="clears">div>
                <ul class="pages">
                    <li>
                        <a href="javascript:;" @click="findPageList(page.prePage)" v-if="page.hasPreviousPage">上一页a>
                    li>
                    <li v-for="item in page.navigatepageNums" :class="item==page.pageNum ? 'page_active' : ''">
                        <a href="javascript:;" @click="findPageList(item)">{{ item }}a>
                    li>
                    <li>
                        <a href="javascript:;" @click="findPageList(page.nextPage)" v-if="page.hasNextPage">下一页a>
                    li>
                ul>
            div>
            <div class="clearfix">div>
        div>
    div>

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房strong>a><a href="about.html">关于我们a><a href="contact.html">联系我们a><a href="follow.html">个人中心a>div>
            <div class="fr">
                <dl>
                    <dt><img src="/static/images/erweima.png" width="76" height="76" />dt>
                    <dd>微信扫一扫<br />房价点评，精彩发布dd>
                dl>
                <dl>
                    <dt><img src="/static/images/erweima.png" width="76" height="76" />dt>
                    <dd>微信扫一扫<br />房价点评，精彩发布dd>
                dl>
                <div class="clears">div>
            div>
            <div class="clears">div>
        div>
    div>
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0    技术支持：XXX div>
    <div class="bg100">div>
div>
<script>
    var app =new Vue({
        el: '#follow',

        data: {
            //接口返回的分页数据，在此声明
            page: {
                list: [],
                pageNum: 1,
                pageSize: 2,
                pages: 1,
                navigatepageNums: [1,2,3,4],
                prePage: 0,
                nextPage: 0,
                hasPreviousPage: false,
                hasNextPage: false
            },

            userInfo: {
                nickName: ''
            }
        },

        mounted () {
            this.findPageList(1)
            this.loadUserInfo()
        },

        methods: {
            loadUserInfo() {
                let userInfoString = window.sessionStorage.getItem("userInfo")
                if(userInfoString != null && userInfoString != '') {
                    this.userInfo = JSON.parse(userInfoString)
                }
            },

            //退出登录
            logout(){
                axios({
                    "url":"/userInfo/logout",
                    "method":"GET"
                }).then(response => {
                    sessionStorage.removeItem("userInfo")
                    location.href = "index.html"
                })
            },
            //分页查询数据
            findPageList(pageNum = 1) {
                if(pageNum < 1) pageNum = 1
                if(pageNum >= this.pages) pageNum = this.pages

                axios({
                    "url":"/userFollow/auth/list/"+pageNum+"/"+this.page.pageSize,
                    "method":"GET"
                }).then(response => {
                    if (response.data.code == 208) {
                        location.href = 'login.html?originUrl='+location.href
                    } else {
                        this.page = response.data.data
                    }
                })
            },
            //取消关注
            cancelFollow(id) {
                axios({
                    "url":"/userFollow/auth/cancelFollow/"+id,
                    "method":"GET"
                }).then(response => {
                    //如果没登录，拦截器会返回208状态，跳转登录页面
                    if (response.data.code == 208) {
                        location.href = 'login.html?originUrl='+location.href
                    } else {
                        this.findPageList(1)
                    }
                })
            }
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207