文章目錄

• • 后臺(tái)代碼
  • • git clone 到本地
    • 創(chuàng)建數(shù)據(jù)庫
    • 配置項(xiàng)目
    • 測(cè)試
  • 前端項(xiàng)目
  • • git clone到本地
    • 下載node.js
    • 下載組件
    • 無法識(shí)別npm命令的解決
    • 運(yùn)行結(jié)果
    • 附錄1：不想每次登錄都填寫用戶名密碼？
    • 附錄2：不想每次輸入驗(yàn)證碼驗(yàn)證？
    • 附錄3：想要局域網(wǎng)的其他電腦也能訪問到當(dāng)前項(xiàng)目？
    • 附錄4：沒有權(quán)限又不想授權(quán)？
    • 跳過嚴(yán)格的編譯檢查
  • 代碼自動(dòng)生成
  • • git clone項(xiàng)目
    • 修改數(shù)據(jù)庫信息
    • 修改代碼生成器
    • • 第一次使用
      • 第二次使用（相同項(xiàng)目不同模塊）
    • 修改controller配置
    • 可視化操作
    • 案例
    • • 1. common模塊：
      • 2. 其他模塊
  • 使用
  • • 新建自己的目錄、菜單
    • • 創(chuàng)建菜單目錄
      • 規(guī)范
      • 樹形組件
      • 將請(qǐng)求轉(zhuǎn)發(fā)給網(wǎng)關(guān)
      • 跨域問題
      • • 是什么
        • 可行的解決方案
        • 最終解決

后臺(tái)代碼

git clone 到本地

• git命令克隆到本地

git clone https://gitee.com/renrenio/renren-fast.git

• 刪除.git文件夾，拖入到自己的項(xiàng)目，作為一個(gè)模塊
• 打開該模塊，復(fù)制sql建表語句
  

創(chuàng)建數(shù)據(jù)庫

• sqlyog中建數(shù)據(jù)庫，例如：admin,并運(yùn)行上面復(fù)制的語句

配置項(xiàng)目

• 項(xiàng)目中需要改變的東西

查看當(dāng)前使用的環(huán)境

修改對(duì)應(yīng)配置文件，修改四個(gè)位置

測(cè)試

• 啟動(dòng)項(xiàng)目

• 如果main報(bào)紅
  先點(diǎn)擊右上角的這個(gè)
  添加sdk
  

• 訪問：
  http://localhost:8080/renren-fast/
  出現(xiàn)如下結(jié)果：
  

前端項(xiàng)目

git clone到本地

• git克隆

git clone https://gitee.com/renrenio/renren-fast-vue.git

• 刪除.git文件夾，拖入到vscode

下載node.js

網(wǎng)址:http://nodejs.cn/

除了安裝目錄，其他直接下一步

npm:類似maven，包管理工具，自動(dòng)下載一些依賴

cmd中輸入node -v可查看版本

國內(nèi)鏡像，cmd輸入：

npm config set registry https://registry.npm.taobao.org

下載組件

• vscode中進(jìn)入前端項(xiàng)目，下載組件：

npm install

無法識(shí)別npm命令的解決

• 解決上述問題：
  win + s，搜索powershell，以管理員省份打開，cd進(jìn)入到項(xiàng)目目錄，安裝
  

運(yùn)行結(jié)果

• 運(yùn)行

npm run dev

• 測(cè)試：用戶名admin，密碼admin
  http://localhost:8001/
  
• 登錄成功：
  

附錄1：不想每次登錄都填寫用戶名密碼？

• 在這個(gè)位置給它賦初始值：
  

附錄2：不想每次輸入驗(yàn)證碼驗(yàn)證？

• 前端去掉驗(yàn)證碼校驗(yàn)
  
• 后端去掉驗(yàn)證碼校驗(yàn)
  
• 最終效果：每次只用點(diǎn)登錄

附錄3：想要局域網(wǎng)的其他電腦也能訪問到當(dāng)前項(xiàng)目？

打開電腦8001端口的防火墻

修改host

把localhost修改為你的ip地址，IP地址可通過命令行輸入ipconfig查看

附錄4：沒有權(quán)限又不想授權(quán)？

• 授權(quán)位置始終返回true
  

跳過嚴(yán)格的編譯檢查

• 沒有錯(cuò)誤也提示？
  
• 關(guān)閉檢查：
  

代碼自動(dòng)生成

git clone項(xiàng)目

• 克隆到本地

git clone https://gitee.com/renrenio/renren-generator.git

修改數(shù)據(jù)庫信息

修改代碼生成器

第一次使用

第二次使用（相同項(xiàng)目不同模塊）

• 對(duì)于其他需要自動(dòng)生成代碼的模塊，只需修改如下內(nèi)容：
  
  

修改controller配置

• 刪除如下內(nèi)容
  
• 注釋如下內(nèi)容（不止兩個(gè)）
  

可視化操作

• 瀏覽器訪問,以生成zip文件
  http://localhost:81/
  
• 用zip文件中的main替換自己項(xiàng)目的mian

案例

1. common模塊：

pom文件導(dǎo)入如下依賴

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.6</version></dependency><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpcore</artifactId><version>4.4.15</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency>

新建包c(diǎn)om.ljy.common.utils

把renren-fast的下面的文件復(fù)制到該目錄

新建exception包,把renren-fast中的如下文件復(fù)制過來

新建xss包，把renre-fast的下面文件復(fù)制過來

新建validator包,把renren-fast如下內(nèi)容復(fù)制過來

2. 其他模塊

引入公共模塊

配置文件：

spring:datasource:driverClassName: com.mysql.jdbc.Driverurl: jdbc:mysql://ip:端口/數(shù)據(jù)庫?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghaiusername: rootpassword: root mybatis-plus:mapper-locations: classpath:/mapper/**/*.xmlglobal-config:db-config:id-type: auto #主鍵自增

測(cè)試crud（略）

使用

新建自己的目錄、菜單

創(chuàng)建菜單目錄

• 啟動(dòng)renren-fast的前臺(tái)和后臺(tái)項(xiàng)目
• 訪問http://localhost:8001/
• 新增 —— 目錄 ——
• 新增 —— 菜單 —— 設(shè)置上級(jí)菜單為剛剛創(chuàng)建的目錄 —— 菜單路由寫uri ——

規(guī)范

• 規(guī)范：
  • 路徑的/會(huì)被替換為-，頁面文件放在/views/modules/下
  • 路由：/product/category對(duì)應(yīng)的頁面文件應(yīng)該放在/views/modules/product/category.vue里，對(duì)應(yīng)訪問路徑是：/product-category

樹形組件

• 使用element組件的 Tree樹形控件

• 替換其中的data數(shù)據(jù)，改為在后臺(tái)獲取

• 寫獲取后臺(tái)數(shù)據(jù)的方法（可參照當(dāng)前項(xiàng)目其他頁面的寫法）,并將該方法寫在生命周期函數(shù)內(nèi)

將請(qǐng)求轉(zhuǎn)發(fā)給網(wǎng)關(guān)

• 修改static/config/index.js中的baseUrl,讓其發(fā)請(qǐng)求給網(wǎng)關(guān)（gateway）
  window.SITE_CONFIG['baseUrl'] = 'http://localhost:88/api';

• renren-fast加入注冊(cè)中心：

bootstrap.yml

spring:application:name: renren-fastcloud:nacos:discovery:server-addr: 127.0.0.1:8848

mian
@EnableDiscoveryClient

• gateway模塊新建路由規(guī)則
  • 路徑改寫：filters：
  spring:cloud:gateway:routes:- id: renren_fasturi: lb://renren-fastpredicates:- Path=/api/**filters:# 路徑改寫，/api/** -> /renren-fast/**- RewritePath=/api(?<segment>/?.*), /renren-fast/$\{segment}

跨域問題

是什么

• cors，跨域問題,如圖，控制臺(tái)打印如下內(nèi)容：
  
  • 什么是跨域
  • 跨域流程

可行的解決方案

• 解決-1：
  
• 解決-2
  

最終解決

• 在網(wǎng)關(guān)模塊加入允許跨域配置

import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;@Configuration public class CorsConfig{@Beanpublic CorsWebFilter corsConfiguration() {UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.addAllowedHeader("*");config.addAllowedMethod("*");config.addAllowedOrigin("*");config.setAllowCredentials(true);configSource.registerCorsConfiguration("/**",config);return new CorsWebFilter(configSource);} }

• 觀察到renren-fast后臺(tái)有跨域配置,注釋掉renren-fast模塊中的該部分內(nèi)容
  

如果不注釋掉該部分，則有如下報(bào)錯(cuò)：

總結(jié)

以上是生活随笔為你收集整理的人人开源（后台代码、前端项目、代码自动生成）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。