Table of contents
1. Remove the verification code
2. Modify the front-end h5 port
4. H5 packaging and deployment
5. Front and back end parameter passing
9. Gender, status display using filters filter
1. Remove the verification code
(1) In the system management menu——"Parameter Settings——"Find the account self-service-verification code switch——"Modify the key value to false.
(2) Change the captchaEnabled of login.vue to false on the front end of the mobile terminal, and turn off the verification code switch
(3) Comment out this paragraph in login.vue on the mobile terminal. If the main reason is not commented, the verification is normal on the local machine, but the display is abnormal after uploading to the server.
2. Modify the front-end h5 port
3. Modify the backend port
Modify the config.js file in the root directory
4. H5 packaging and deployment
(1) Replace config.jswithbaseUrl/prod-api
(2) Click Publish——"Website PC web or mobile phone h5, then fill in the title and domain name, click 发行the button, and the packaging will be successful.
(3) Open this directory in the console
Upload the index file and static folder in this directory to the front-end directory of the server 
(4) Configure Nginx
Add the following code in nginx,
a. Note that the front-end port number 9090 must not be occupied by other programs, otherwise it cannot be started.
b. The backend port address in this code is http://localhost:8085. If you need to modify the back-end code, refer to the above content
c. The front-end port number 9090 requires firewall settings and all ips can be accessed
d. /prod-api和移动端config.jsofbaseUrl内容/prod-api要一致
e.root /home/ptc/whale_sys/dist_h5此目录是移动端index和static文件上传的目录
server {
listen 9090;
location / {
root /home/ptc/whale_sys/dist_h5;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:8085/;
}
}After configuration ngnix -s reload hot start ngnix
(5) The preview in the browser is as follows
5. Front and back end parameter passing
(1) Use @RequestParam to pass parameters
When using @RequestParam, the URL is like this: http://host:port/path?parameter name=parameter value
front end :
let url='Zhang San'
let params={'url':url}
getJsapiSignature(params).then(res => {....})
api：
export function getJsapiSignature(query) {
return request({
url: '/system/qywx/signature/',
method: 'get',
params: query
})
}
rear end:
@GetMapping(value = "/system/qywx/signature/")
public WxJsapiSignature getJsapiSignature(@RequestParam("url") String url) {
System.out.println(url);
}
(2) Use @PathVariable to pass parameters
When using @PathVariable, the URL is like this: http://host:port/path/parameter value
front end :
getGoodDataByCode(codeContent).then(res => {....})
api：
// Query material information through QR code
export function getGoodDataByCode(goodCode) { return request({ url: '/feedback/goods/code/'+goodCode, method: 'get', }) }
backend :
@GetMapping(value = "code/{goodCode}")
public AjaxResult getInfo(@PathVariable("goodCode") String goodCode)
{
return AjaxResult.success(fGoodsService.selectFGoodsByCode(goodCode));
}
6. Vue array trick
(1) The join method is used to convert the array into a string, separated by commas
Usage 1: aaList:["aaa", "bbb", "ccc"]
After aaList.join(',') is aaa, bbb, ccc
用法提升： let images = []
this.fileList1.forEach((item) => {
images.push(item.url)
})
this.form.problemPhotos=images.join(',');
(2) The splice method is used to replace/delete/add a certain value or several values in the array , which will change the initial array.
- index: Array start subscript
- len: the length of the replacement/deletion
- item: the value to replace, the item is empty when deleting
-
delete:
-
let arr = ['1','2','3','4']; arr.splice(0,2); console.log(arr.toString()); //3,4 -
replace:
let arr = ['1','2','3','4']; arr.splice(0,2,['5','6','7']); console.log(arr.toString()); //5,6,7,3,4
Added: -
let arr = ['1','2','3','4']; arr.splice(0,0,['5','6','7']); console.log(arr.toString()); //5,6,7,1,2,3,4,
7. Vue object operation
(1) The Object.assign() method is used to copy the values of all enumerable properties from one or more source objects to the target object. It will return the target object. usage:
Object.assign(target, ...sources)
参数： target--->目标对象
source--->源对象
返回值：target，即目标对象var target={name:'guxin',age:25};
var source={state:'single'}
var result=Object.assign(target,source);
console.log(target,target==result);Result: {name: 'guxin', age:25, state: 'single'}
(2) JSON.parse format conversion, converting strings to objects
let res = JSON.parse(uploadRes.data) //The final passed is a string, here needs to convert the format
console.log(res.file)
8. Display the current date
Need to use uview
var date = new Date();
this.form.problemDate = this.$u.timeFormat(date, 'yyyy-mm-dd hh:MM:ss')
9. Gender, status display using filters filter
Requirements: Some data is destined to be converted before it can be viewed by others, but I don’t want to write three or very long conversion expressions repeatedly every time
e.g. gender, status
<!-- 性别 -->
<view >
<text class="text-grey">性别</text>
</view>
<view >
<text class="text-grey">{
{info.sex | formatSex}}</text></view>
</view>
export default {
data(){
return{
}
},
//和computed,watch等同级别
filters: {
// 格式化性别
formatSex: function(str) {
const sexEnum = {
"1": "男",
"2": "女",
}
return sexEnum[str];
}
},
methods: {
}
}
10 Dictionary usage
(1) Introduce the method in the page
import { getDicts } from "@/api/system/dict/data";
(2) Load the data dictionary
export default {
data() {
return {
statusOptions: [],
.....
...
onLoad(option) {
this.getDicts("status_type").then(response => {
this.statusOptions= response.data;
});
},(3) front end
<span>{ {statusType}}</span>
(4) Read the data dictionary display content
//Use find to traverse the search and display the dictionary value
let status=app.statusOptions.find(item=>item.dictValue==res.data.status);
this.statusType=status .dictLabel
(5) List display
Replace the numbers in the list with traversal directly into dictionary values
this.dataList.forEach((self,index) => {
let status=this.statusOptions.find(item=>item.dictValue==self.status);
self.statusType=status.dictLabel
});
11. Get current user
import { getUserProfile } from "@/api/system/user"
getUserProfile().then(response => {
app.form.problemUsername = response.data.nickName
app.form.problemUsernum = response.data.userName
});