sss项目需要记住的---死也要记住！！！

**死也要给我记住：

数据库：user表，salary表

user表：**

salary表：

发get请求：参数加params

前端用axios和element要先安装再导入

安装：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 在main.js中配置axios,element
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// axios
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:8888'

// 添加Axios响应拦截器
axios.interceptors.response.use(function (response) {
  //console.log('响应拦截',response)
  return response.data;
}, function (error) {
  console.log(error)
});


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

导入：

npm install --save axios vue-axios
npm i element-ui -S

图表：
返回收入，支出，就是要传给前端，后端用对象传
先在实体类建一个类，类的属性是收入和支出
由于设计的表中忘写支出，就写一个死数据

// 图表
@GetMapping("/tuBiao")
public R tuBiao()   {
    // 查询返回的结果
    aaa list1 = this.salaryService.tuBiao();
    System.out.println(list1);

    return  R.ok(list1);
}

aaa tuBiao();



@Override
public aaa tuBiao() {
    return this.salaryMapper.tubiao();
}



aaa tubiao();



<!-- 查询收入支出 -->
<select id="tubiao" resultType="com.sss.entity.aaa">

    select sum(money) as shouru,1200 as zhichu
    from salary

</select>

前端：

按钮：

    <el-footer>@爱朴彩英一辈子
      <el-button type="info" @click="biao" plain>图表</el-button>
    </el-footer>



    //   跳转到图表页面
    biao(){
      this.$router.push('/echarts')
    },

    <template>
      <!--设置容器-->
      <div id="chart" style="width: 1200px; height: 600px;"></div>
    </template>
    
    <script>
    import * as echarts from 'echarts'
    import axios from "axios";
    
    export default {
      name: "Echarts",
      mounted() {
        this.initChart()
      },
      methods: {
        initChart() {
          const chart = echarts.init(document.getElementById('chart'))
          axios.get("/api/salary/tuBiao").then(res =>{
            let retDate = res.data;
            console.log(retDate)
            const option = {
              series: [
                {
                  type: 'pie',
                  data: [
                    {
                      value: retDate.shouru,
                      name: `收入${retDate.shouru}`
                    },
                    {
                      value: retDate.zhichu,
                      name: `支出${retDate.zhichu}`
                    }
                  ]
                }
              ]
            }
            // 使用图表配置
            chart.setOption(option)
          })
    
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

**

**

用sha算法实现对数据库密码的加密，让拥有一定权限的人查看 后端，注册时输入的密码要转化为加密的密码 :

**

**

    /**
     * 注册
     * 采用sha加密
     *
     * @param user 实体
     * @return 新增结果
     */
    @PostMapping("/save")
    public R add(@RequestBody User user) {
    
        // 采用sha加密
    
        // 得到明文密码
        String password = user.getPassword();
        System.out.println("注册时原来的密码===" +password);
    
        // 1 得到密文 （hash值） 注册存储数据库
        String encodePassword = EncryptUtil.sha(EncryptUtil.SHA256,user.getPassword());
        System.out.println("注册时加密后的密码==="+encodePassword);
    
        // 让原来密码和加密后的密码进行比较，看是否一样
        if (EncryptUtil.sha(EncryptUtil.SHA256, password).equals(encodePassword)){
    
            System.out.println("比较成功");
    
            // 把加密后的密码设置成user对象中的密码
            user.setPassword(encodePassword);
    
            // 调用service曾
            this.userService.insert(user);
            return R.ok();
        }else {
            return R.fail("注册失败");
        }
    }

   // service 层
    int insert(User user);
    
    //serviceImpl 层
        @Override
        public int insert(User user) {
            return this.userMapper.insert(user);
        }
    
    //mapper层
        int insert(User user);

**

xml

**

    <!--新增所有列-->
    <insert id="insert" keyProperty="id" useGeneratedKeys="true">
        insert into user(phone_number, nick_name, password)
        values (#{phoneNumber}, #{nickName}, #{password})
    </insert>

**## *

登陆时密码是明文，后端接收到要转化为暗文，去数据库查找***

 /**
     * 登录
     * base64 主要用于 编码
     * 采用sha加密
     */
    @GetMapping("/login")
    public R login(@RequestParam String identifier, // 可以是手机号或昵称
                   @RequestParam String password) {
    
        // 采用sha加密
    
        System.out.println("登陆时原生密码==="+password);
    
        // 1 得到密文 （hash值） 注册存储数据库
        String encodePassword = EncryptUtil.sha(EncryptUtil.SHA256, password);
    
    
        System.out.println("登陆时加密的密码==="+encodePassword);
    
        // 2.比较密码---登录时校验
        //   对明文密码 进行比较
        if (EncryptUtil.sha(EncryptUtil.SHA256, password).equals(encodePassword)){
    
            System.out.println("比较成功");
    
            User user = this.userService.loginByIdentifier(identifier, encodePassword);
    
            return R.ok(user);
        }else {
            return R.fail("登录失败，手机号或密码错误");
        }
    
    }

    
    // service  层
    User loginByIdentifier(String identifier, String encodePassword);
    
    
    //serviceImpl层
    
     /**
         * 登录  判断是用手机号或昵称 和密码登录
         * @param identifier
         * @param encodePassword
         * @return
         */
        @Override
        public User loginByIdentifier(String identifier, String encodePassword) {
    
            // 判断是否为手机号
            if (isPhoneNumber(identifier)) {
                return loginUserByPhoneNumber(identifier, encodePassword);
            } else {
                // 不是手机号，认为是昵称
                return loginUserByNickName(identifier, encodePassword);
            }
        }
    
        private boolean isPhoneNumber(String input) {
            // 判断是否为手机号的逻辑，你可以根据实际需求进行更严格的手机号验证
            // 这里简单地假设手机号是纯数字且长度在合理范围内
            return input != null && input.matches("\\d{11}");
        }
    
        private User loginUserByPhoneNumber(String phoneNumber, String encodePassword) {
            // 执行基于手机号的登录逻辑
            // 你需要在这里实现根据手机号和密码进行验证的代码
            // 返回验证通过的用户对象或null
    
            return this.userMapper.loginUserByPhoneNumber(phoneNumber, encodePassword);
        }
    
        private User loginUserByNickName(String nickName, String encodePassword) {
            // 执行基于昵称的登录逻辑
            // 你需要在这里实现根据昵称和密码进行验证的代码
            // 返回验证通过的用户对象或null
    
            return this.userMapper.loginUserByNickName(nickName,encodePassword);
        }
    
    
    
    
    //mapper 层
    
     // 用手机号登录
        User loginUserByPhoneNumber(@Param("phoneNumber") String phoneNumber,@Param("encodePassword") String encodePassword);
    
        // 用昵称登录
        User loginUserByNickName(@Param("nickName") String nickName,@Param("encodePassword") String encodePassword);
    

xml

  <!-- 用手机号和密码登录 -->
    <select id="loginUserByPhoneNumber" resultType="com.sss.entity.User">
        select *
        from user
        where phone_number = #{phoneNumber} and password = #{encodePassword}
    </select>
    
    <!-- 用昵称和密码登录 -->
    <select id="loginUserByNickName" resultType="com.sss.entity.User">
        select *
        from user
        where nick_name = #{nickName}  and password = #{encodePassword}
    </select>

**

注册时对手机号和昵称进行校验，已经存在的不能注册

**

前端：

    <template>
      <div>
        <div class="zi">注册</div>
        <div style="background-color:#dbdada; height: 630px">
          <el-form :model="user" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input v-model="user.phoneNumber" ></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="user.nickName" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="required">
              <el-input v-model="user.required"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('user')">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    
    export default {
      data() {
        // 校验 手机号 和 昵称 的方法需要写在 data中 return外
        // 校验 手机号 和 昵称 的方法需要写在 data中 return外
        // 校验 手机号 和 昵称 的方法需要写在 data中 return外
          
        // 校验手机号
        var checkphoneNumber = (rule, value, callback) => {
    
            //发的post请求，{phoneNumber:value} 必须写成这种格式，记住就行
          axios.post('/api/user/check',{phoneNumber:value}).then(ret => {
            if (ret.code === 2000) {
              callback(new Error('手机号已存在'));
            } else {
             callback();
            }
          })
        }
    
        // 校验昵称
        var checknickName = (rule, value, callback) => {
    
          //发的post请求，{nickName:value} 必须写成这种格式，记住就行
          axios.post('/api/user/check',{nickName:value}).then(ret => {
            if (ret.code === 2000) {
              callback(new Error('昵称已存在'));
            } else {
              callback();
            }
          })
        }
    
        return {
          user: {
            phoneNumber: '',
            nickName: '',
            password: '',
            required: ''
          },
           //校验
          rules: {
            phoneNumber: [
              { required: true, message: '请输入手机号', trigger: 'blur' },
                //自定义校验规则，checkphoneNumber就是随便起的一个方法名
              { validator: checkphoneNumber, trigger: 'blur' }
            ],
            nickName: [
              { required: true, message: '请输入昵称', trigger: 'blur' },
                //自定义校验规则，checknickName就是随便起的一个方法名
              { validator: checknickName, trigger: 'blur' }
            ],
          }
        };
      },
      methods: {
        submitForm(user) {
          axios.post('/api/user/save', this.user).then(ret => {
            if (ret.code === 2000) {
              this.$message({
                message: '注册成功',
                type: 'success',
                duration: 700
              })
              // 返回到登录页面
              this.$router.push('/')
    
            } else {
              this.$message({
                message: '注册失败',
                type: 'error',
                duration: 700
              })
            }
          })
        }
      }
    }
    </script>
    
    <style>
    .zi {
      font-size: 40px;
      line-height: 100px;
      background-color: rgba(177, 177, 177, 0.96);
    }
    .demo-ruleForm {
      max-width: 400px; /* 设置表单最大宽度 */
      margin: 0 auto; /* 居中显示 */
      padding: 20px; /* 添加一些内边距 */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果，使表单在页面中更为突出 */
    }
    
    .demo-ruleForm .el-form-item {
      margin-bottom: 20px; /* 设置表单项之间的垂直间距 */
    }
    
    .demo-ruleForm .el-button {
      width: 100%; /* 让按钮占满整个宽度 */
    }
    </style>

**

后端：

**

    /**
     * 校验 手机号 和 昵称 在注册时 是否 已存在
     */
    @PostMapping("/check")
    public R queryByPage(@RequestBody User user) {
    
        System.out.println("接收的user==》"+user);
    
        return R.ok(this.userService.queryByPage(user));
    }



    //service层
    List<User> queryByPage(User user);
    
    
    //serviceImpl层
    
      /**
         * 校验 手机号 和 昵称 是否已存在
         *
         * @return 查询结果
         */
        @Override
        public List<User> queryByPage(User user) {
            return this.userMapper.queryAllByLimit(user);
        }
    
    
    //mapper层
        List<User> queryAllByLimit(User user);

xml

  <!--查询多行数据 用来校验 手机号 和 昵称 是否已存在-->
    <select id="queryAllByLimit" resultMap="UserMap">
        select
            phone_number,nick_name
        from user
        <where>
            <if test="phoneNumber != null and phoneNumber != '' ">
                and phone_number = #{phoneNumber}
            </if>
            <if test="nickName != null and nickName != '' ">
                and nick_name = #{nickName}
            </if>
        </where>
    </select>

上面死也要记住，死也要记住，死也要记住！！！！