用SpringCloud+redis+jwt+Es+RabbitMq等实现登录邮箱注册及搜索高亮展示

1.业务图

2.后端

2.1 项目结构图

码云地址：源代码

3.前端

3.1 建好工程，导入依赖

npm install axios
npm install vue-cookie
npm i element-ui -s

3.2 login.vue

<template>
  <div class="hello">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button type="primary" @click="toregsitry">没账号去注册</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        form:{}
      }
    },
    methods:{
      onSubmit:function () {
        axios.post("http://localhost:8010/wqd-user/login",this.form).then(res=>{
          //登录成功
          if (res.data.code==200){
            var token =  res.data.message;
            //将token设置到cookie中
            this.$cookie.set("token",token)

            this.$router.push("/book")
          }else{
            alert(res.data.message)
          }
        })
      },
      toregsitry:function () {
        this.$router.push("/")
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

3.3 reg.vue

<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="用户名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="form.password" ></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="form.mail" style="width: 1350px"></el-input>
        <el-button type="info" icon="el-icon-message" @click="sendMail" circle></el-button>
      </el-form-item>
      <el-form-item label="用户验证码">
        <el-input v-model="form.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">注册</el-button>
        <el-button type="primary" @click="onSubmitgo">有账号去登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import  axios  from 'axios'
  export default {
    name: "",
    data(){
      return{
        form:{}
      }
    },
    methods:{
      sendMail:function () {
        axios.post("http://localhost:8010/wqd-user/sendMail",{mail:this.form.mail}).then(res=>{
          if (res.data.code==200){
            const h = this.$createElement;
            this.$message({
              message: h('p', null, [
                h('span', null, '邮箱发送 '),
                h('i', { style: 'color: red' }, '成功')
              ])
            });
          }
        })
      },
      onSubmit:function () {
        axios.post("http://localhost:8010/wqd-user/registry",{user:this.form,code:this.form.code,email:this.form.mail}).then(res=>{
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('i', { style: 'color: red' }, res.data.message)
            ])
          });
          if (res.data.code==200){
            this.$router.push("/login")
          }
        })
      },
      onSubmitgo:function () {
        this.$router.push("/login")
      }
    }
  }
</script>

<style scoped>

</style>

3.4 book.vue

<template>
  <div>

    <el-input v-model="input"  placeholder="请输入内容" style="width: 20%;"></el-input>
    <el-button @click="findAll" style="margin-bottom: 50px"  icon="el-icon-search" circle></el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="图书ID"></el-table-column>
    <el-table-column prop="name" label="图书名称">
      <template slot-scope="scope">
        <span v-html="scope.row.name"></span>
      </template>
    </el-table-column>
    <el-table-column prop="desc" label="图书描述">
      <template slot-scope="scope">
        <span v-html="scope.row.desc"></span>
      </template>
    </el-table-column>
    <el-table-column prop="price" label="图书价格"></el-table-column>
    <el-table-column prop="createtime" label="出版时间"></el-table-column>
    <el-table-column prop="author" label="作者"></el-table-column>
    <el-table-column prop="star" label="评分"></el-table-column>
    <el-table-column prop="pic" label="图片">
      <template slot-scope="scope">
        <el-image
          style="width: 60px; height: 60px"
          :src="scope.row.pic"
          fit="fill"></el-image>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  import axios from 'axios'
  axios.defaults.withCredentials=true;
  export default {
    data() {
      return {
        tableData: [],
        input:'null'
      }
    },
    methods:{
      findAll:function (key) {
        key = this.input;
        axios.get("http://localhost:8010/wqd-search/search/"+key).then(res=>{
          this.tableData=res.data.message;
        })
      }
    },
    mounted(){
      this.findAll(null);
    }
  }
</script>