lisang
/
vue3-element-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 项目细节优化

This commit is contained in:
郝先瑞 2022-03-27 21:45:50 +08:00
parent 91e810ffa7
commit 0703579ecc
21 changed files with 87 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -3,6 +3,6 @@
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV='development'
VITE_APP_TITLE = '有来商城管理系统'
VITE_APP_PORT = 9527
VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/dev-api'

4
.env.production
View File

@ -1,6 +1,6 @@
## 生产环境
NODE_ENV='production'
VITE_APP_TITLE = '有来商城管理系统'
VITE_APP_PORT = 9527
VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/prod-api'

6
.env.staging
View File

@ -1,6 +1,6 @@
## 模拟环境
NODE_ENV='production'
NODE_ENV='staging'
VITE_APP_TITLE = '有来商城管理系统'
VITE_APP_PORT = 9527
VITE_APP_TITLE = 'vue3-element-admin'
VITE_APP_PORT = 3000
VITE_APP_BASE_API = '/prod--api'

12
README.md
View File

@ -61,10 +61,12 @@
| |Gitee| Github| GitCode |
| ---- | ----| ---- | ---- |
| 开源组织 | [有来开源组织](https://gitee.com/youlaiorg) | [有来开源组织](https://github.com/youlaitech) | [有来开源组织](https://gitcode.net/youlai) |
| 后端 | [youlai-mall](https://gitee.com/youlaiorg/youlai-mall)| [youlai-mall](https://github.com/youlaitech/youlai-mall) | [youlai-mall](https://gitcode.net/youlai/youlai-mall) |
| 管理前端 | [mall-admin-web](https://gitee.com/youlaiorg/mall-admin-web) | [mall-admin-web](https://github.com/youlaitech/mall-admin-web) | [mall-admin-web](https://gitcode.net/youlai/mall-admin-web) |
| 技术团队 | [有来技术团队](https://gitee.com/youlaitech) | [有来技术团队](https://github.com/youlaitech) | - |
| 商城后端 | [youlai-mall](https://gitee.com/youlaiorg/youlai-mall)| [youlai-mall](https://github.com/youlaitech/youlai-mall) | [youlai-mall](https://gitcode.net/youlai/youlai-mall) |
| 商城管理前端(Vue3)| [mall-admin-web](https://gitee.com/youlaiorg/mall-admin-web) | [mall-admin-web](https://github.com/youlaitech/mall-admin-web) | [mall-admin-web](https://gitcode.net/youlai/mall-admin-web) |
| 商城管理前端(Vue2)| [mall-admin-web](https://gitee.com/youlaitech/youlai-mall-admin/tree/vue2/) | [mall-admin-web](https://github.com/youlaitech/mall-admin-web/tree/vue2/) | - |
| 小程序/H5/移动端 | [mall-app](https://gitee.com/youlaiorg/mall-app)| [mall-app](https://github.com/youlaitech/mall-app) | [mall-app](https://gitcode.net/youlai/mall-app) |
| vue3-element-admin| [vue3-element-admin](https://gitee.com/youlaiorg/vue3-element-admin) | [vue3-element-admin](https://github.com/youlaitech/vue3-element-admin) |-|
## 启动部署
@ -84,11 +86,9 @@
### 项目启动
>🚨 如果前端开发人员或者本地没有启动后台服务的情况，需要修改 vite.config.ts 的代理地址 http://localhost:9999 为线上接口地址 http://www.youlai.tech:9999
1. npm install
2. npm run dev
3. 浏览器访问 http://localhost:9527
3. 浏览器访问 http://localhost:3000
### 项目部署

4
devops/Dockerfile
View File

@ -1,4 +0,0 @@
FROM nginx:1.18.0
MAINTAINER xtaylkss@163.com
COPY ./devops/nginx.conf /etc/nginx/
COPY ./dist/ /opt/nginx/html/web/

111
devops/K8sJenkinsFile
View File

@ -1,111 +0,0 @@
pipeline { // 直接上k8s，用k8s来管理docker
agent {
node {
label "nodejs"
}
}
parameters {
choice(
description: "你需要选择哪条分支进行构建?",
name: "branch_name",
choices: ["master", "feat/youlai_k8s_deploy"]
)
}
environment {
// 自建harbor仓库的namespace
docker_hub_namespace = "youlai"
// docker_hub_namespace = "youlaiwuhui"
web_app_name = "youlai-web-vue3"
// 自建镜像仓库地址
docker_hub = "k8s-harbor:30002"
// docker_hub = "https://registry.cn-hangzhou.aliyuncs.com"
// 在jenknis或kubesphere上面的凭证
docker_hub_id = "youlai-zhangjialin-myself-harbor-account"
// docker_hub_id = "zhangjialin-aliyun-pingzheng"
// k8s 上面的 namespace
k8s_namespace = "youlai-mall"
GIT_COMMIT_ID = sh(returnStdout: true, script: 'git rev-parse --short HEAD').trim()
// BUILD_NUMBER 这个变量从jenkins传递过来
current_build_number = "${BUILD_NUMBER}"
// 在k8s上面配置的id
KUBECONFIG_CREDENTIAL_ID = "youlai-kubeconfig"
}
stages {
stage ("打印相关变量") {
steps{
echo "docker_hub_namespace信息为: ${docker_hub_namespace}"
// 获取commit信息，用于后面打tag
echo "commit信息为：${env.GIT_COMMIT_ID}"
echo "current_build_number信息为：${env.current_build_number}"
script {
// 本端tag名
env.local_tag = "frontend:${current_build_number}_${GIT_COMMIT_ID}"
// 远端tag名，必须以这种方式命令，才能push到远端
env.remote_tag = "${docker_hub}/${docker_hub_namespace}/${local_tag}"
echo "local_tag信息为：${env.local_tag}"
echo "remote_tag信息为：${env.remote_tag}"
}
}
}
stage("checkout代码") {
steps {
//git branch: "${branch_name}", credentialsId: 'zhangjialin-youlai-mall-pingzheng', url: 'https://gitee.com/youlaitech/youlai-mall.git'
//checkout([
//$class: 'GitSCM',
//branches: [[name: "${branch_name}"]],
//extensions: [[$class: 'CloneOption', depth: 1, noTags: false, reference: '', shallow: true]],
//userRemoteConfigs: [[credentialsId: 'zhangjialin-youlai-mall-pingzheng', url: 'https://gitee.com/youlaitech/youlai-mall.git']]])
sh "du -h --max-depth=1"
}
}
stage('构建') {
agent none
steps {
container('nodejs') {
script {
sh 'yarn config set registry https://registry.npm.taobao.org'
sh 'npm config set registry https://registry.npm.taobao.org'
sh 'ls -al $WORKSPACE/src/components/TreeSelect'
sh 'yarn install --force'
sh 'yarn build:prod'
}
}
}
}
stage('构建镜像') {
agent none
steps {
script {
container('nodejs') {
sh "pwd && ls -al"
sh "docker build -t ${env.local_tag} -f devops/Dockerfile ."
withCredentials([usernamePassword(credentialsId: "${docker_hub_id}",
passwordVariable: 'DOCKER_PASSWORD', usernameVariable: 'DOCKER_USERNAME')]) {
sh 'echo "$DOCKER_PASSWORD" | docker login http://k8s-harbor:30002 -u "$DOCKER_USERNAME" --password-stdin'
sh "docker tag ${env.local_tag} ${env.remote_tag}"
sh "docker push ${env.remote_tag}"
}
}
}
}
}
stage("自动部署至k8s") {
agent none
steps {
container ("nodejs") {
// 这种方式启k8s是官方推荐的
sh 'envsubst < devops/deploy.yaml | kubectl apply -f -'
}
}
}
}
}

65
devops/deploy.yaml
View File

@ -1,65 +0,0 @@
apiVersion: apps/v1
kind: Deployment
metadata:
labels:
app: ${web_app_name}
name: ${web_app_name}-deployment
namespace: ${k8s_namespace} #一定要写名称空间
spec:
progressDeadlineSeconds: 600
replicas: 1
selector:
matchLabels:
app: ${web_app_name}
strategy:
rollingUpdate:
maxSurge: 50%
maxUnavailable: 50%
type: RollingUpdate
template:
metadata:
labels:
app: ${web_app_name}
spec:
containers:
- image: $remote_tag
# readinessProbe:
# httpGet:
# path: /actuator/health
# port: 8080
# timeoutSeconds: 10
# failureThreshold: 30
# periodSeconds: 5
imagePullPolicy: Always
name: ${web_app_name}
ports:
- containerPort: 80
protocol: TCP
resources:
limits:
cpu: 1000m
memory: 512Mi
terminationMessagePath: /dev/termination-log
terminationMessagePolicy: File
dnsPolicy: ClusterFirst
restartPolicy: Always
terminationGracePeriodSeconds: 30
---
apiVersion: v1
kind: Service
metadata:
labels:
app: ${web_app_name}
name: ${web_app_name}-svc
namespace: ${k8s_namespace}
spec:
ports:
- name: http
port: 80
protocol: TCP
targetPort: 80
nodePort: 32609
selector:
app: ${web_app_name}
sessionAffinity: None
type: NodePort

47
devops/nginx.conf
View File

@ -1,47 +0,0 @@
user nginx;
worker_processes 1;
error_log /var/log/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
server_name localhost; #你的serverName
location / {
root /opt/nginx/html/web;
index index.html;
}
# 代理转发请求至网关，prod-api标识解决跨域问题
location /prod-api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#proxy_pass http://ks.howlaisi.com:32006/;
proxy_pass http://youlai-gateway-svc.youlai-mall.svc.cluster.local:9999/;
}
# 重定向错误页面到 /50x.html
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>有来商城管理系统Vue3</title>
<title>vue3-element-admin</title>
</head>
<body>
<div id="app"></div>

4
src/lang/en.ts
View File

@ -6,12 +6,12 @@ export default {
},
// 登录页面国际化
login: {
title: 'Youlai Mall Management System',
title: 'vue3-element-admin',
username: 'Username',
password: 'Password',
login: 'Login',
code: 'Verification Code',
copyright: 'Copyright © 2021 - 2022 youlai.tech All Rights Reserved. ',
copyright: '',
icp: ''
},
// 导航栏国际化

6
src/lang/zh-cn.ts
View File

@ -6,13 +6,13 @@ export default {
},
// 登录页面国际化
login:{
title: '有来商城管理系统 Vue3',
title: 'vue3-element-admin',
username:'用户名',
password:'密码',
login:'登 录',
code:'请输入验证码',
copyright:'Copyright © 2021 - 2022 youlai.tech All Rights Reserved. 有来技术 版权所有',
icp:'ICP备案号:皖ICP备20006496号-2'
copyright:'',
icp:''
},
navbar:{
dashboard: '首页',

2
src/layout/components/Sidebar/Logo.vue
View File

@ -23,7 +23,7 @@ const props = defineProps({
}
})
const title=ref("youlai-mall")
const title=ref("vue3-element-admin")
const logo=ref("http://cdn.youlai.tech/logo.png")
</script>

6
src/types/index.d.ts vendored
View File

@ -15,11 +15,7 @@ export * from './api/sms/advert'
export * from './api/oms/order'
export * from './api/ums/member'
export * from './store/user'
export * from './store/app'
export * from './store/permission'
export * from './store/setting'
export * from './store/tagsView'
export * from './store'
export * from './common'

57
src/types/store.d.ts vendored Normal file
View File

@ -0,0 +1,57 @@
import {RouteRecordRaw,RouteLocationNormalized} from "vue-router";
/**
* 用户状态类型声明
*/
export interface AppState {
device: string,
sidebar: {
opened: boolean,
withoutAnimation: boolean
},
language:string,
size:string
}
/**
* 权限类型声明
*/
export interface PermissionState{
routes:RouteRecordRaw[]
addRoutes: RouteRecordRaw[]
}
/**
* 设置状态类型声明
*/
export interface SettingState {
theme: string,
tagsView: boolean,
fixedHeader: boolean,
showSettings: boolean,
sidebarLogo: boolean
}
/**
* 标签状态类型声明
*/
export interface TagView extends Partial<RouteLocationNormalized> {
title?: string
}
export interface TagsViewState{
visitedViews: TagView[],
cachedViews: (string)[]
}
/**
* 用户状态类型声明
*/
export interface UserState {
token: string,
nickname: string,
avatar: string,
roles: string[],
perms: string[]
}

12
src/types/store/app.d.ts vendored
View File

@ -1,12 +0,0 @@
/**
* 用户状态类型声明
*/
export interface AppState {
device: string,
sidebar: {
opened: boolean,
withoutAnimation: boolean
},
language:string,
size:string
}

9
src/types/store/permission.d.ts vendored
View File

@ -1,9 +0,0 @@
import {RouteRecordRaw} from "vue-router";
/**
* 权限类型声明
*/
export interface PermissionState{
routes:RouteRecordRaw[]
addRoutes: RouteRecordRaw[]
}

10
src/types/store/setting.d.ts vendored
View File

@ -1,10 +0,0 @@
/**
* 设置状态类型声明
*/
export interface SettingState {
theme: string,
tagsView: boolean,
fixedHeader: boolean,
showSettings: boolean,
sidebarLogo: boolean
}

12
src/types/store/tagsView.d.ts vendored
View File

@ -1,12 +0,0 @@
import {RouteLocationNormalized} from "vue-router";
/**
* 用户状态类型声明
*/
export interface TagView extends Partial<RouteLocationNormalized> {
title?: string
}
export interface TagsViewState{
visitedViews: TagView[],
cachedViews: (string)[]
}

10
src/types/store/user.d.ts vendored
View File

@ -1,10 +0,0 @@
/**
* 用户状态类型声明
*/
export interface UserState {
token: string,
nickname: string,
avatar: string,
roles: string[],
perms: string[]
}

14
src/views/dashboard/components/Team/index.vue
View File

@ -80,20 +80,20 @@ const state = reactive({
{
imgUrl: 'http://cdn.youlai.tech/rui.jpg',
nickname: '郝先瑞',
positions: ['后端', '前端', '打杂'],
positions: ['Vue3','Java', '文档'],
homepage: 'https://www.cnblogs.com/haoxianrui/'
},
{
imgUrl: 'http://cdn.youlai.tech/chuan.jpg',
nickname: '张川',
positions: ['Vue3','Java' ],
homepage: 'https://blog.csdn.net/qq_41595149'
},
{
imgUrl: 'http://cdn.youlai.tech/lin.jpg',
nickname: '张加林',
positions: ['DevOps'],
homepage: 'https://gitee.com/ximy'
},
{
imgUrl: 'http://cdn.youlai.tech/chuan.jpg',
nickname: '张川',
positions: ['后端', '前端'],
homepage: 'https://blog.csdn.net/qq_41595149'
}
],
colors: ['', 'success', 'warning', 'danger'],

2
vite.config.ts
View File

@ -27,7 +27,7 @@ export default ({command, mode}: ConfigEnv): UserConfig => {
open: true, // 运行自动打开浏览器
proxy: {
[env.VITE_APP_BASE_API]: {
target: 'http://localhost:9999',
target: 'http://www.youlai.tech:9999',
changeOrigin: true,
rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
}