前后端开发备忘

验证码的原理

前端在装载login页面的时候，就已经向后端发了一次请求：captchaImage，后端接收到这个请求以后，生成了一个随机的字符串（数字加减乘除），以及一个uuid，返回给前端。前端根据字符串生成图片，同时将uuid存储在loginform中，点击登录的时候，就一起提交到后台，后台根据uuid去redis查询结果，查到了就说明验证码是对的，然后才验证用户名和密码。

后端的token.header和前端的headers: ‘Authorization’,

必须保持一致，比如都是Authorization，否则即便用户密码正确，系统会提示登录已过期，无法正常登录

新建module失败的问题

之前通过复制module的方式新建了一个module，然后在前端也新建了相关的module，运行了以后，发现前端的请求后端始终接收不到，经过反复测试，发现问题应该是后端项目在打包时没有将新建的module打包到项目中来，导致前端的请求始终处于404的状态。
如果其中找得到新建的controller，就说明新的module已经被正确加载，否则就重新执行mvn命令：reload all maven projects-》clean-》install。

vue项目中的菜单路径说明

菜单配置中，菜单的路由地址是指地址栏上的url地址，注意和上级菜单的路由地址联合，比如：酒店管理的路由地址是“hotelManage”,其下级菜单“酒店”的路由地址是“hotel”，那么要打开“酒店”这个菜单的地址就是“hotelManage/hotel”,而酒店的组件路径对应的就是酒店页面的前端页面，其路径位于：src/hotelManage/hotel/index.vue。

路由权限验证

所有的前端页面在做正式业务请求的时候，会调用一个router.beforeEach方法，也就是说，只要路由即将发生变化，就会调用这个方法，在这个方法(permission.js)中，校验了用户信息以及用户是否有该路由的权限，代码如下:

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          store.dispatch('GenerateRoutes').then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
          })
        }).catch(err => {
            store.dispatch('LogOut').then(() => {
              Message.error(err)
              next({ path: '/' })
            })
          })
      } else {
        next()
      }
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

后端在别的机子上新建了module，上传到git，然后在另外的机子上拉取代码，会出现新的module未被项目识别为module的问题，解决的方法是在项目的project structure-》modules-》点击加号-》选择import module，然后就可以了。

动态路由的配置方法：

<template slot-scope="scope">
         <el-button
            size="mini"
            type="text"
            @click="handleRoomInfo(scope.row)"
            v-hasPermi="['system:hotelRoom:edit']"
          >查看</el-button>
        </template>
// 注意其中的v-hasPermi="['system:hotelRoom:edit']"！！！！！
//method:
/** 房间详情 */
    handleRoomInfo: function (row) {
      const hotelID = row.hotelID;
      this.$router.push("/hotelRoom/list/" + hotelID );
    },
//在router/index.js中做了如下的动态路由的配置：
export const dynamicRoutes = [
  {
    path: "/system/user-auth",
    component: Layout,
    hidden: true,
    permissions: ["system:user:edit"],
    children: [
      {
        path: "role/:userId(\\d+)",
        component: () => import("@/views/system/user/authRole"),
        name: "AuthRole",
        meta: { title: "分配角色", activeMenu: "/system/user" },
      },
    ],
  },
  {
    path: "/hotelRoom",
    component: Layout,
    permissions: ["system:hotelRoom:edit"],
    children: [
      {
        path: "list/:hotelID(\\d+)",
        component: () => import("@/views/hotelManage/room"),
        name: "HotelRoom",
        meta: { title: "房间详情"},
      },
    ],
  },
// 注意其中的permissions!!!!

新建VUE的项目的结构中各路径说明：

node_modules:存放通过npm install安装的所有项目依赖

public：公用文件

src:业务文件

components：存放通用的组件

app.vue是项目的一开始加载的文件

main.js是项目入口文件，类似与java项目的main函数入口。

项目构建工具：vue cli对应的配置文件是vue.config.js

vite构建工具对应的配置文件是vite.config.js

webpack构建工具对应的配置文件是webpack.config.js

v-bind:可以直接简化为:

v-on用于事件绑定，可以简化为@

v-model

mysql中选择某一列中含有中文的记录：

select *
from boss_room_meal_from_excel
where length(price) != char_length(price);

mysql选出某两列组合起来唯一的记录：

SELECT
hotelname,
roomname
FROM
boss_room_meal_from_excel
GROUP BY
hotelname, roomname;

删除重复数据：

DELETE b1
FROM boss_room_meal_from_excel b1
JOIN boss_room_meal_from_excel b2
ON b1.hotelname = b2.hotelname
AND b1.roomname = b2.roomname
AND b1.bedtype = b2.bedtype
AND b1.mealtype = b2.mealtype
AND b1.id > b2.id;

java后端生成支付宝订单

分两种形式，一种和证书无关，一种依赖于证书：

App 支付服务端 DEMO&SDK - 支付宝文档中心 (alipay.com)

java后端对支付宝穿回来的订单进行签名验证

java后端对支付宝回调做签名验证

git-移除某文件或文件夹的版本控制(ignore)_git移除版本控制-优快云博客

微信小程序上显示网络图片以进行标记：

//首先下载网络图片到本地
        wx.downloadFile({
          //后台配置的 合法下载url地址
          url: item.imageurl,
          success:
              (pathInfo) => {
                 if (item.latitude != null && item.longitude != null) {
                  let obj = {
                    id: item.hotelid, // 使用 marker点击事件 需要填写id
                    latitude: Number(item.latitude),
                    longitude: Number(item.longitude),
                    iconPath: pathInfo.tempFilePath,
                    width: 40,
                    height: 40,
                    callout: {
                      content: item.namecn,
                      color: '#308C89',
                      borderRadius: 10,
                      padding: 10,
                      display: 'ALWAYS'
                    }
                  }
                  markers.push(obj);
                  _this.markers = markers;
                }
              }
        })
      })

带参跳转到tab页面

对于tab页面，需要用switchTab才起作用

uni.switchTab({url: url}）

tabbar 页面在加载完成后，不会在切换和跳转中被销毁。也就是意味着跳转到已经加载过了的tabbar页面后，onLoad 中的代码是不会去执行。好在onShow、onHide 中的代码在切换、展现、隐藏执行。所以，要实现带参转到tab页面，需要用relunch方法

 uni.reLaunch({
        url: url+ "?index=" + item
      });   
// tabbar 页面 
onLoad(option){ 
console.log(option);
}

在webstorm中直接运行uniapp的方法

1. 下载uniapp tool插件
2. 在settings中设置hbuilder和微信小程序的应用路径
3. 在新建运行方式中选择uniapp

将本地jar包打入到项目包中

  <build>
        <pluginManagement>
            <plugins>                
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <configuration>
                        <!--maven编译时将本地引用的jar包一起打包-->
                        <includeSystemScope>true</includeSystemScope>
                    </configuration>
                </plugin>
            </plugins>
        </pluginManagement>
</build>