【SDU项目实训2019级】前端设计——推荐界面，存储用户职业、专业、感兴趣的词

朱雀 2023-09-28 09:06 25阅读 0赞

完成注册之后，会让用户选择自己与中医相关的职业、专业、以及感兴趣的热词/领域词，以便后续来实现用户推荐排序功能：

根据用户选择，保存用户选择的兴趣词，向后端传送该数据，后端保存在数据库。

以下是自己设计的单选框/复选框按钮，是不是很好看！我也觉得！主要是样式的设计

![6c82d142d56a44fdb4dc6e50a6067c59.png][]

主体部分为右边可以选择的部分：

<div class="widget widget_categories">
                      <div class="widget-head">
                        <h3>你的职业</h3>
                      </div>
                      <div class="tagcloud">
                          <label v-for="(item,index) in whom":class="{active:index == isA }" @click="ClickActiveOne1(index)">
                            {
       {item.job}}</label>
                      </div>
                    </div>
                    <div class="widget widget_categories">
                      <div class="widget-head">
                        <h3>你的专业</h3>
                      </div>
                      <div class="tagcloud">
                        <label v-for="(item,index) in profession" :class="{active:index == isPro}" @click="ClickActiveOne2(index)">
                          {
       {item.pname}}</label>
                      </div>
                    </div>
                    <div class="widget widget_tag_cloud">
                      <div class="widget-head">
                        <h3>感兴趣的词条</h3>
                      </div>
                      <div class="tagcloud">
                        <label v-for="(item,index) in word" :class="{active:item.active}" @click="ClickActive(item,index)">
                          {
       {item.wname}}</label>
                      </div>
                    </div>

其中“你的职业”“你的专业”“感兴趣的词条”的样式css：

.blog-sidebar {
      padding-left: 30px;
    }
    
    .blog-sidebar .widget {
      margin-bottom: 40px;
    }
    
    .blog-sidebar .widget .widget-head {
      padding-bottom: 8px;
      border-bottom: 1px solid #D4D4D4;
      margin-bottom: 20px;
    }
    
    .blog-sidebar .widget .widget-head h3 {
      display: inline-block;
      font-size: 18px;
      color: #fff;
      font-weight: 600;
      text-transform: capitalize;
      padding: 10px 15px;
      border-radius: 3px;
      background-color: #00715D;
    }

然后所有词条的标签的样式css：

.blog-sidebar .tagcloud {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: 15px 10px;
    }
    
    .blog-sidebar .tagcloud label {
      display: inline-block;
      padding: 5px 20px;
      background-color: #D9EAE7;
      border-radius: 3px;
      font-size: 14px;
      color: #232323;
      text-transform: capitalize;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
    }

然后用户点击切换词条，是通过添加click监听方法，然后给标签添加属性，点击一下将属性变为true或者获取标签的索引，使高亮（即图片中的红色样式）展示出来

![89afe4689c134089a28dc306a6b6982c.png][]

多选则是给我的列表的元素添加一个active属性：true/false，通过点击来实现选择/不选择，然后v-for绑定展示高亮（选择）/普通（不选择）

![0ec6f854602149ef98d8e2d56ca77a0b.png][]

在style里面添加：

label.active{
      background-color: #E26262;
      color: #fff;
    }

即自己设计的好看的单选框/多选框实现啦~，没有使用element-ui提供的单选多选框。

然后通过点击去搜索，即会向后端发送一个request，将该信息存储在user表中，保存用户实体，添加属性。

![bb48aef4f9b548c38abce3dd057a988c.png][]

然后用户个性推荐选择部分完成，主要是为了后面实现推荐排序功能，提供用户画像~

[6c82d142d56a44fdb4dc6e50a6067c59.png]: https://img-blog.csdnimg.cn/6c82d142d56a44fdb4dc6e50a6067c59.png
[89afe4689c134089a28dc306a6b6982c.png]: https://img-blog.csdnimg.cn/89afe4689c134089a28dc306a6b6982c.png
[0ec6f854602149ef98d8e2d56ca77a0b.png]: https://img-blog.csdnimg.cn/0ec6f854602149ef98d8e2d56ca77a0b.png
[bb48aef4f9b548c38abce3dd057a988c.png]: https://img-blog.csdnimg.cn/bb48aef4f9b548c38abce3dd057a988c.png