项目初始化(创建项目)
vue create longchi
(node:20704) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Vue CLI v5.0.9
// 手动选择功能 点击空格为选中，可以移动上下箭头自由选择
? Please pick a preset: Manually select features
// 下选择 Babel, Router, Vuex
? Check the features needed for your project: Babel, Router, Vuex
// 选择 vue2.0
? Choose a version of Vue.js that you want to start the project with 2.x
// 使用路由器的历史模式
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
// 选择 package.json 包管理
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
// 将此设为预设，以便日后项目使用
? Save this as a preset for future projects? Yes
// 将预设保存为 uniapp_longchi
? Save preset as: uniapp_longchi
🎉 Preset uniapp_longchi saved in C:\Users\Administrator\.vuerc
Vue CLI v5.0.9
✨ Creating project in D:\workspace_uniapp\longchi.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.22
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 13.47s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 5.38s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project longchi.
👉 Get started with the following commands:
$ cd longchi
$ yarn serve
cd longchi
yarn serve
yarn run v1.22.22
$ vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 5340ms
在git执行的代码如下
==================leader要完成的项目创建并初始化 start====================
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp
$ git config --global user.name 'zengguoqing'
git config --global user.email 'm18017927192@163.com'
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp
$ git clone https://gitee.com/zengguoqing/vue-tea.git
Cloning into 'vue-tea'...
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 6 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
Receiving objects: 100% (6/6), done.
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git remote -v
origin https://gitee.com/zengguoqing/vue-tea.git (fetch)
origin https://gitee.com/zengguoqing/vue-tea.git (push)
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git branch
* master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git branch dev 创建分支
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git branch
dev
* master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git checkout dev 切换分支
Switched to branch 'dev'
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git branch 查看分支
* dev
master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git push --set-upstream origin dev 提交设置上游远程分支
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Powered by GITEE.COM [1.1.5]
remote: Set trace flag 154a11ad
remote: Create a pull request for 'dev' on Gitee by visiting:
remote: https://gitee.com/zengguoqing/vue-tea/pull/new/zengguoqing:dev...zengguoqing:m
aster
To https://gitee.com/longchi18/vue-tea.git
* [new branch] dev -> dev
branch 'dev' set up to track 'origin/dev'.
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git branch
* dev
master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git branch feature/home 创建feature/home分支
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git checkout feature/home 切换到feature/home分支
Switched to branch 'feature/home'
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (feature/home)
$ git branch 查看分支
dev
* feature/home
master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (feature/home)
// 将创建的feature/home分支提交到远程仓库
$ git push --set-upstream origin feature/home
Total 0 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Powered by GITEE.COM [1.1.5]
remote: Set trace flag a44678b9
remote: Create a pull request for 'feature/home' on Gitee by visiting:
remote: https://gitee.com/zengguoqing/vue-tea/pull/new/zengguoqingf:feature/home...zengguoqing:master
To https://gitee.com/zengguoqing/vue-tea.git
* [new branch] feature/home -> feature/home
branch 'feature/home' set up to track 'origin/feature/home'.
提交代码
$ dir 查看项目文件
LICENSE babel.config.js node_modules public src yarn.lock
README.md jsconfig.json package.json server vue.config.js
$ git branch 查看分支
dev
* feature/home
master
$ git checkout dev 切换到dev分支提交代码
M README.md
Switched to branch 'dev'
Your branch is up to date with 'origin/dev'.
$ git branch
* dev
feature/home
master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git add . 提交代码
warning: in the working copy of 'README.md', LF will be replaced by CRLF the nex
t time Git touches it
warning: in the working copy of '.gitignore', LF will be replaced by CRLF the ne
xt time Git touches it
warning: in the working copy of 'babel.config.js', LF will be replaced by CRLF t
he next time Git touches it
warning: in the working copy of 'jsconfig.json', LF will be replaced by CRLF the
next time Git touches it
warning: in the working copy of 'package.json', LF will be replaced by CRLF the
next time Git touches it
warning: in the working copy of 'public/index.html', LF will be replaced by CRLF
the next time Git touches it
warning: in the working copy of 'server/app.js', LF will be replaced by CRLF the
next time Git touches it
warning: in the working copy of 'server/bin/www', LF will be replaced by CRLF th
e next time Git touches it
warning: in the working copy of 'server/package-lock.json', LF will be replaced
by CRLF the next time Git touches it
warning: in the working copy of 'server/package.json', LF will be replaced by CR
LF the next time Git touches it
warning: in the working copy of 'server/public/stylesheets/style.css', LF will b
e replaced by CRLF the next time Git touches it
warning: in the working copy of 'server/routes/index.js', LF will be replaced by
CRLF the next time Git touches it
warning: in the working copy of 'server/routes/users.js', LF will be replaced by
CRLF the next time Git touches it
warning: in the working copy of 'server/views/error.ejs', LF will be replaced by
CRLF the next time Git touches it
warning: in the working copy of 'server/views/index.ejs', LF will be replaced by
CRLF the next time Git touches it
warning: in the working copy of 'src/App.vue', LF will be replaced by CRLF the n
ext time Git touches it
warning: in the working copy of 'src/components/HelloWorld.vue', LF will be repl
aced by CRLF the next time Git touches it
warning: in the working copy of 'src/main.js', LF will be replaced by CRLF the n
ext time Git touches it
warning: in the working copy of 'src/router/index.js', LF will be replaced by CR
LF the next time Git touches it
warning: in the working copy of 'src/store/index.js', LF will be replaced by CRL
F the next time Git touches it
warning: in the working copy of 'src/views/AboutView.vue', LF will be replaced b
y CRLF the next time Git touches it
warning: in the working copy of 'src/views/HomeView.vue', LF will be replaced by
CRLF the next time Git touches it
warning: in the working copy of 'vue.config.js', LF will be replaced by CRLF the
next time Git touches it
$ git commit -m '初始化项目' 执行提交描述
[dev 1e6ad4b] 初始化项目
26 files changed, 7362 insertions(+), 37 deletions(-)
create mode 100644 .gitignore
create mode 100644 babel.config.js
create mode 100644 jsconfig.json
create mode 100644 package.json
create mode 100644 public/favicon.ico
create mode 100644 public/index.html
create mode 100644 server/app.js
create mode 100644 server/bin/www
create mode 100644 server/package-lock.json
create mode 100644 server/package.json
create mode 100644 server/public/stylesheets/style.css
create mode 100644 server/routes/index.js
create mode 100644 server/routes/users.js
create mode 100644 server/views/error.ejs
create mode 100644 server/views/index.ejs
create mode 100644 src/App.vue
create mode 100644 src/assets/logo.png
create mode 100644 src/components/HelloWorld.vue
create mode 100644 src/main.js
create mode 100644 src/router/index.js
create mode 100644 src/store/index.js
create mode 100644 src/views/AboutView.vue
create mode 100644 src/views/HomeView.vue
create mode 100644 vue.config.js
create mode 100644 yarn.lock
$ git push 上传到远程仓库
Enumerating objects: 43, done.
Counting objects: 100% (43/43), done.
Delta compression using up to 8 threads
Compressing objects: 100% (34/34), done.
Writing objects: 100% (41/41), 134.55 KiB | 4.98 MiB/s, done.
Total 41 (delta 1), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Powered by GITEE.COM [1.1.5]
remote: Set trace flag fd4ab396
To https://gitee.com/zengguoqing/vue-tea.git
44d7672..1e6ad4b dev -> dev
==================leader要完成的项目创建并初始化 end====================
==================Employee要完成的项目创建并初始化 start====================
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git branch
* dev
feature/home
master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git checkout feature/home
Switched to branch 'feature/home'
Your branch is up to date with 'origin/feature/home'.
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (feature/home)
$ git config --global user.name 'zengguoqing'
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (feature/home)
$ git config --global user.email 'm18017927192@163.com'
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (feature/home)
$ git log 查看日志
commit 44d76720d68aa1d97311ab2955b3472af1dfa754 (HEAD -> feature/home, origin/ma
ster, origin/feature/home, origin/HEAD, master)
Author: zengguoqing <m18017927192@163.com>
Date: Fri Sep 12 05:53:17 2025 +0000
add README.md.
实现如下功能：
1， 登录功能
2， 支付功能
3， 购物车和我的
4， 其他功能
Signed-off-by: zengguoqing <m18017927192@163.com>
commit 501f60c8aee90408d1465635160676bf63574e89
Author: zengguoqing <m18017927192@163.com>
Date: Fri Sep 12 05:41:29 2025 +0000
Initial commit
Administrator@WIN-0RBNR6MPV7A MINGW64 /h/uniapp/vue-tea (feature/home)
$ git branch -r 查看远程分支
origin/HEAD -> origin/master
origin/dev
origin/feature/home
origin/master
普通员工
Administrator@WIN-0RBNR6MPV7A MINGW64 /h/vue/vue-tea (dev)
$ git branch
* dev
Administrator@WIN-0RBNR6MPV7A MINGW64 /h/vue/vue-tea (dev)
$ git branch -r 查看远程分支
origin/HEAD -> origin/master
origin/dev
origin/feature/home
origin/master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (dev)
$ git checkout master 切换到master分支
Switched to branch 'master'
Your branch is up to date with 'origin/master'.
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git branch 查看分支
dev
feature/home
* master
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$ git merge dev 把dev分支的工作或成果合并到maste分支 切记 要到master分支执行
Updating 44d7672..1e6ad4b
Fast-forward
.gitignore | 23 +
README.md | 61 +-
babel.config.js | 3 +
jsconfig.json | 19 +
package.json | 51 +
public/favicon.ico | Bin 0 -> 4286 bytes
public/index.html | 17 +
server/app.js | 41 +
server/bin/www | 90 +
server/package-lock.json | 591 ++++
server/package.json | 16 +
server/public/stylesheets/style.css | 8 +
server/routes/index.js | 9 +
server/routes/users.js | 9 +
server/views/error.ejs | 3 +
server/views/index.ejs | 11 +
src/App.vue | 32 +
src/assets/logo.png | Bin 0 -> 6849 bytes
src/components/HelloWorld.vue | 130 +
src/main.js | 12 +
src/router/index.js | 30 +
src/store/index.js | 12 +
src/views/AboutView.vue | 5 +
src/views/HomeView.vue | 18 +
vue.config.js | 4 +
yarn.lock | 6204 +++++++++++++++++++++++++++++++++++
26 files changed, 7362 insertions(+), 37 deletions(-)
create mode 100644 .gitignore
create mode 100644 babel.config.js
create mode 100644 jsconfig.json
create mode 100644 package.json
create mode 100644 public/favicon.ico
create mode 100644 public/index.html
create mode 100644 server/app.js
create mode 100644 server/bin/www
create mode 100644 server/package-lock.json
create mode 100644 server/package.json
create mode 100644 server/public/stylesheets/style.css
create mode 100644 server/routes/index.js
create mode 100644 server/routes/users.js
create mode 100644 server/views/error.ejs
create mode 100644 server/views/index.ejs
create mode 100644 src/App.vue
create mode 100644 src/assets/logo.png
create mode 100644 src/components/HelloWorld.vue
create mode 100644 src/main.js
create mode 100644 src/router/index.js
create mode 100644 src/store/index.js
create mode 100644 src/views/AboutView.vue
create mode 100644 src/views/HomeView.vue
create mode 100644 vue.config.js
create mode 100644 yarn.lock
Administrator@WIN-0RBNR6MPV7A MINGW64 /e/uniapp/vue-tea (master)
$
Administrator@WIN-0RBNR6MPV7A MINGW64 /h/vue/vue-tea (dev)
$ git checkout --track origin/feature/home
branch 'feature/home' set up to track 'origin/feature/home'.
Switched to a new branch 'feature/home'
Administrator@WIN-0RBNR6MPV7A MINGW64 /h/vue/vue-tea (feature/home)
$ git cherry-pick 501f60c8aee90408d1465635160676bf63574e89
$ git cherry-pick 501f60c8aee90408d1465635160676bf63574e89
On branch feature/home
Your branch is up to date with 'origin/feature/home'.
You are currently cherry-picking commit 501f60c.
(all conflicts fixed: run "git cherry-pick --continue")
(use "git cherry-pick --skip" to skip this patch)
(use "git cherry-pick --abort" to cancel the cherry-pick operation)
nothing to commit, working tree clean
The previous cherry-pick is now empty, possibly due to conflict resolution.
If you wish to commit it anyway, use:
git commit --allow-empty
Otherwise, please use 'git cherry-pick --skip'
commit 501f60c8aee90408d1465635160676bf63574e89
Author: zengguoqing <m18017927192@163.com>
Date: Fri Sep 12 05:41:29 2025 +0000
git cherry-pick --skip 501f60c8aee90408d1465635160676bf63574e89
git cherry-pick 501f60c8aee90408d1465635160676bf63574e89
git merge dev （--no-ff）(-m)//合并，把dev分支的工作成果合并到master分支上
$ git config -l
diff.astextplain.textconv=astextplain
filter.lfs.clean=git-lfs clean -- %f
filter.lfs.smudge=git-lfs smudge -- %f
filter.lfs.process=git-lfs filter-process
filter.lfs.required=true
http.sslbackend=openssl
http.sslcainfo=H:/Program Files/Git/mingw64/etc/ssl/certs/ca-bundle.crt
core.autocrlf=true
core.fscache=true
core.symlinks=false
pull.rebase=false
credential.helper=manager
credential.https://dev.azure.com.usehttppath=true
init.defaultbranch=master
user.name=zengguoqing
user.email=m18017927192@163.com
credential.https://gitee.com.provider=generic
core.repositoryformatversion=0
core.filemode=false
core.bare=false
core.logallrefupdates=true
core.symlinks=false
core.ignorecase=true
==================Employee要完成的项目创建并初始化 end====================
[点击并拖拽以移动]
#ifndef #endif以及 #ifdef #endif的作用
import App from './App'
// uView2.x
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
// 引入请求封装，将app参数传递到配置中
require('@/utils/request.js')(app)
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
代码解释：
#ifndef VUE3
...
#endif
表示在VUE3代码中不生效
#ifdef VUE3
...
#endif
表示在VUE3代码中生效
// #ifndef H5
config.baseURL = 'https://uata.banluu.xuexiluxian.com/'; /* 根域名 */
// config.baseURL = 'https://www.longchi.xyz';
// #endif
代码解释：
以上代码表示在H5端不生效，在非H5端生效 这是 #ifndef #endif的作用
该方法将贯穿整个项目，重点掌握
[点击并拖拽以移动]
项目功能介绍
前台的uniapp部分
1, 登录：由微信一键登录和手机验证号码登录
2，支付，从选择商品的规格到确认订单到微信支付，包含退款是原路返回
3，查询，商品发货货可以查询，物流信息，包括地址的管理，订单的管理，个人中心等等模块。
后台管理系统
从登录开始，左侧菜单的权限以及按钮权限控制，他的模块有：
1, 商城管理
2, 财务管理
3， 运营管理
4，系统管理
5，系统监控
多平台快速开发的UI框架
uView UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
https://uviewui.com/
UI插件
https://ext.dcloud.net.cn/
https://ext.dcloud.net.cn/plugin?id=1593
1，去插件市场搜索uview，找到 如下图所示 uview
2, 点击下载
3,点击 '下载插件并导入HBuildX'
4, 选择要导入的项目 比如 next-superhero-dev
5, 如下图所示，uview导入成功
配置步骤
1,引入 uView主JS库
在项目根目录中的 main.js 中，引入并使用 uView的JS库，注意这两行要放在 import Vue 之后
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
2, 在引入 uView的全局SCSS主题文件
在项目根目录的 uni.scss中引入此文件。
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
3, 引入uview基础样式
注意：在App.vue中，首行的位置引入，注意给style标签加入 lang="scss" 属性
<style lang="scss">
/*注意给style标签加入 lang="scss" 属性*/
@import '@/uni_modules/uview_ui/index.scss';
</style>
4, 配置 easycom组件模式
此配置需要在项目根目录的pages.json中进行.
// pages.json
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
温馨提示
uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
如果您是通过uni_modules形式引入uView，可以忽略此配置
如下图所示表示已经成功配置
手机浏览器打开的 网页是不可以到顶部的
手机APP打开的 app端可以到顶部的
请求二次封装流程
$u 表示uview内置的一个对象,相当于
uni.$u 二次封装 相当于
uni.request({})
他为什么可以直接用？在pages.json中引入了其实就是uview插件
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": {
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [],
}
封装主要在以下四个文件中操作
1, 在main.js中引入如下文件
// 引入请求封装，将app参数传递到配置中
require('@/utils/request.js')(app)
完整代码如下： main.js
import App from './App'
// uView2.x
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
// 引入请求封装，将app参数传递到配置中
require('@/utils/request.js')(app)
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
2, pages/index/index.vue
<template>
<view class="content">
<u-button type="primary" shape="circle" text="按钮形状"></u-button>
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
import {
agreement
} from '@/utils/api/login.js';
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
agreement().then(res => {
console.log(res)
})
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
3, utils/api/login.js
const http = uni.$u.http
// post请求，获取菜单
// export const postMenu = (params, config = {}) => http.post('/ebapi/public_api/index', params, config)
// get请求，获取菜单，注意：get请求的配置等，都在第二个参数中，详见前面解释
// export const getMenu = (data) => http.get('/ebapi/public_api/index', data)
export const postMenu = (data) => http.post('/ebapi/public_api/index', data)
//查询地区（通过上级ID）
export const agreement = (data) => http.get('/agreement', {
params: data
})
4, utils/request.js 请求二次封装
// 请求二次封装
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
// 初始化请求配置
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = 'http://uat.banlu.xuexiluxian.cn/'; /* 根域名 */
return config
})
// 请求拦截 客户端发送到服务端的请求
uni.$u.http.interceptors.request.use((config) => {
return config
}, config => {
return Promie.reject(config)
})
// 响应拦截 服务端返回到客户端的数据
uni.$u.http.interceptors.response.use((response) => {
const data = response.data
return data === undefined ? {} : data;
}, (response) => {
// 对响应错误做点什么 (statusCode !== 200)
return Promise.reject(response)
})
// // 请求拦截
// uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
// // 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
// config.data = config.data || {}
// // 根据custom参数中配置的是否需要token，添加对应的请求头
// if (config?.custom?.auth) {
// // 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
// config.header.token = vm.$store.state.userInfo.token
// }
// return config
// }, config => { // 可使用async await 做异步操作
// return Promise.reject(config)
// })
// // 响应拦截
// uni.$u.http.interceptors.response.use((response) => {
// /* 对响应成功做点什么 可使用async await 做异步操作*/
// const data = response.data
// // 自定义参数
// const custom = response.config?.custom
// if (data.code !== 200) {
// // 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
// if (custom.toast !== false) {
// uni.$u.toast(data.message)
// }
// // 如果需要catch返回，则进行reject
// if (custom?.catch) {
// return Promise.reject(data)
// } else {
// // 否则返回一个pending中的promise，请求不会进入catch中
// return new Promise(() => {})
// }
// }
// return data.data === undefined ? {} : data.data
// }, (response) => {
// // 对响应错误做点什么 （statusCode !== 200）
// return Promise.reject(response)
// })
}
H5端有跨域问题，这里可以设置代理解决跨域问题 如下图所示
第1种解决方式：
"h5": {
"devServer": {
"port": 8083, // 端口号
"disableHostCheck": true, // 关闭主机检查
"proxy": {
"/api": { // 代理路径前缀
"target": "http://localhost: 8866/", // 目标接口域名
"changeOrigin": true, // 是否跨域 允许跨域
"secure": false // 设置支付https协议代理
}
}
}
}
第2种解决方式： 打开vite.config.js文件，配置如下代码
// const TransformPages = require('uni-read-pages')
// const {
// webpack
// } = new TransformPages()
// 只是在H5端生效，在小程序端不生效
module.exports = {
devServer: {
proxy: {
'/': {
target: 'http://uat.banlu.xuexiluxian.cn/',
changeOrigin: true
}
}
}
// configureWebpack: {
// plugins: [
// new webpack.DefinePlugin({
// ROUTES: webpack.DefinePlugin.runtimeValue(() => {
// const tfPages = new TransformPages({
// includes: ['path', 'name', 'aliasPath']
// });
// return JSON.stringify(tfPages.routes)
// }, true)
// })
// ]
// }
}
小程序端没有跨域问题
接下来先去做登录这一块
新建文件
备份 pages/index/index.vue
<template>
<view class="content">
<u-button type="primary" shape="circle" text="按钮形状"></u-button>
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
import {
agreement
} from '@/utils/api/login.js';
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
agreement().then(res => {
console.log(res)
})
},
methods: {
request() {
uni.request({
url: 'http://uat.banlu.xuexiluxian.cn/agreement',
method: 'GET',
data: {},
success: res => {},
fail: () => {},
complete: () => {}
});
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
首页文件配置 pages.json
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": { // u-$1 表示components下所有u-*都可以，u-$.vue 表示u-*.vue所有文件都可以，即表示全局引入ui组件所有内容
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabs/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
pages,json完整配置文件
{
// 如果您是通过uni_modules形式引入uView，可以忽略此配置
"easycom": { // u-$1 表示components下所有u-*都可以，u-$.vue 表示u-*.vue所有文件都可以，即表示全局引入ui组件所有内容
"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabs/index",
"style": {
"navigationBarTitleText": "推荐",
"navigationStyle": "custom"
}
},
{
"path": "pages/tabs/list",
"style": {
"navigationBarTitleText": "分类"
}
},
{
"path": "pages/tabs/me",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle": "custom"
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "微信一键登录"
}
},
{
"path": "pages/login/bindPhone",
"style": {
"navigationBarTitleText": "绑定手机号"
}
}
],
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/tabs/index",
"iconPath": "/static/icon/recommend.png",
"selectedIconPath": "/static/icon/recommend-hl.png",
"text": "推荐"
}, {
"pagePath": "pages/tabs/list",
"iconPath": "/static/icon/classify.png",
"selectedIconPath": "/static/icon/classify-hl.png",
"text": "分类"
}, {
"pagePath": "pages/tabs/me",
"iconPath": "/static/icon/mine.png",
"selectedIconPath": "/static/icon/mine-hl.png",
"text": "我的"
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}