content
Drop down to load more homepages
Video play plus follow + favorite
Comment on the building A reply BB reply CC reply A similar
Package login and registration
Develop a Bilibili , including the following package and install it on the phone
Proficient in the test and mastery of the operation, the skills will be higher. Life is not Lin Daiyu, and it will not be full of charm because of sadness. It is luck that the opportunity happens to meet your efforts. come on dry
Early review 
The 150,000-word background management system project includes from zero construction to the end of writing the server on-line, combining server + back-end + front-end, to complete the vue project background management system Including php package, back-end node.js code, front-end source code and documentation interface description + combined with server + back-end + front-end, complete the vue project background management system https://blog.csdn.net/m0_57904695/article/details/122648464
In the project, we will use a lot of reused components for development, which can better integrate with real enterprise-level projects, reduce our redundant code, and improve readability (developers other than ourselves)
End of the preface
Effect picture:
Sign in with signature
Register with regular
personal center
Drop down to load more homepages
Modify personal center
Video play plus follow + favorite
Comment on the building A reply BB reply CC reply A similar
There are many functions, so I will not show them one by one, and go directly to the development.
project start
At the beginning, you will configure path aliases, encapsulate axios, rem, etc., and write the mobile terminal rem adaptation, which must be done well. Here I wrote a variety of configurations separately, which are very easy to understand and write in reverse thinking. I hope you can do it. Helping everyone to configure rem vw_0 on the mobile terminal. Blogs living in the wind and waves Big enough, or small enough, the size will become big or small, resulting in a poor user experience, of course who would use a device that big or small? In most cases, it can actually be ignored. If you are a person who seeks the most perfect user experience, you can set the maximum and minimum values for the root element through rem, and add the maximum and minimum widths to the body https://blog. csdn.net/m0_57904695/article/details/122249803?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164804337816780271590085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164804337816780271590085&biz_id= 0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122249803.nonecase&utm_term=rem&spm=1018.2226.3001.4450
Package login and registration
Because they are similar, father to son gives different values 
Package login
position: parent component
Write the transmitted data in the parent component, and the child component receives it
<template>
<div id="">
<div class="loginTop">
<!-- 父组件通过自定义属性传值，如果是字符串可以不加 ： -->
<!-- 如果在data中定义成变量，等号左边属性要加: -->
<login-top middleTop="注册哔哩哔哩"></login-top>
<my-input-label
placeholder="请输入姓名"
label="姓名"
rule="^.{6,16}$"
style="margin: 15px 0"
@changeInput="(res) => (uname = res)"
></my-input-label>
<my-input-label
placeholder="请输入手机号"
label="账号"
rule="^.{6,16}$"
@changeInput="(res) => (phone = res)"
></my-input-label>
<!--
@changeInput="res=>password=res"
这种是简写了
完整写法：
@changeInput="changeInput"
changeInput(val){
this.uname =val
this.phone =val
this.password =val
}
-->
<my-input-label
placeholder="请输入密码"
label="密码"
type="password"
rule="^.{6,16}$"
@changeInput="(res) => (password = res)"
></my-input-label>
</div>
</div>
</template>
<script>
import LoginTop from "../../components/LoginCon/MyLoginTop.vue";
import MyInputLabel from "../../components/LoginCon/MyInputLabel.vue";
export default {
name: "",
data() {
return {
uname: "",
phone: "",
password: "",
};
},
methods: {
},
computed: {},
components: {
LoginTop,
MyInputLabel,
},
created() {},
};
</script>
<style lang="scss" scoped>
//@import '引入的css文件';
</style>
The parent component writes different values to the child component, the child component is responsible for receiving, the child component is used to define the structural style, and the parent component is responsible for passing the value
That is, the idea of packaging,
With this in mind:
Location: Subcomponent
This is a sub-component of the top text "Bibi Lili". Input will create a new folder and encapsulate it.
<template>
<div id="">
<div class="loginTop">
<div></div>
<div>{
{middleTop}}</div>
<div></div>
</div>
</div>
</template>
<script>
export default {
name:'',
data() {
return {};
},
props:['middleTop'],
methods: {},
computed: {
},
components: {},
created() {},
};
</script>
<style lang="scss" scoped >
//@import '引入的css文件';
.loginTop{
width: 100%;
height: 70px;
background-color: #ffff;
color: #000000;
font-size: 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 33.3%;
padding: 0 15px;
}
</style>Summarize the process, in the form of pictures, as follows
The top text is packaged!
The following encapsulates the input
Location: Subcomponent
This is a sub-component of the top "Account Password". The input is not written together with the top text in the package alone, and the style structure is different.
<template>
<div id="">
<div class="myInputlabel">
<van-cell-group>
<van-field
v-model="value"
:label="label"
:placeholder="placeholder"
:type="type"
:rule="rule"
/>
</van-cell-group>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
value: "",
};
},
props: ["placeholder", "label", "type", "rule"],
watch: {
value: {
handler(newVal, oldVal) {
this.regEv()
},
},
},
methods: {
regEv(){
// 因为传过来的是字符串所以要将字符串变成真正的正则
const reg = new RegExp(this.rule)
// console.log(reg.test(this.value)); //false
if(reg.test(this.value)){
this.$emit('changeInput', this.value)
}
}
},
};
</script>
<style lang="scss" scoped>
//@import '引入的css文件';
.loginTop {
width: 100%;
height: 50px;
background-color: #ffff;
color: #000000;
font-size: 25px;
display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 33.3%;
padding: 0 15px;
}
</style>
Summarize the process, in the form of pictures, as follows
Copy the van-field component of Vant and write it in the sub-component, and introduce the sub-component in the parent component, which involves different types of passwords, different placeholders, as well as regularities, and labels with different texts.
Define what you need in the parent component and send it to the child component
Here are two blog posts that are recommended to receive props. Of course, the official is more complete. It is recommended to go through the Vue component communication props acceptance form. How to use the value Define props members by way of objects, you can formulate rules for each prop member (type, verification...), the commonly used ones are as follows. The form accepted by parent-child props https://blog.csdn.net/m0_57904695/ article/details/121661892?spm=1001.2014.3001.5501
Vue component communication _0. Blog living in the wind and waves % 2522request% 255Fid% 2522% 253A % 2522164812465916780274173611% 2522% 252C% 2522scm% 2522% 253A% 252220140713.130102334.pc% 255Fblog.% 2522% 257D & request_id = 164812465916780274173611 & biz_id = 0 & utm_medium = distribute.pc_search_result.none-task-blog-2 ~ blog ~ first_rank_ecpm_v1~rank_v31_ecpm-1-121723392.nonecase&utm_term=%E9%80%9A%E8%AE%AF&spm=1018.2226.3001.4450
Vue3 encapsulates the input component_0. Blog living in the storm-CSDN blog_vue3 The first step in encapsulating input is Create a myInput.vue file in the components folder <template> <div> <input type="text" :value="modelValue" @input="iptChange"> </div> </template><script>import { ref } from 'vue'export default { props: {
https://blog.csdn.net/m0_57904695/article/details/121627922?spm=1001.2014.3001.5501
Wacth listens to the value of the input. If the regular matching is correct, it will trigger the child-to-parent event. That is, the value you enter in the input box of the child component on the parent component page will be judged as regular in the child component. If it matches, the parent component will be sent, and the parent component will be sent to the parent component. After the component is received, it can determine whether to log in in the next step, etc.
Become true is to judge success
After passing the value, it also leads to the value written by the parent component above. This is the picture above at the beginning.
Take a look at the effect of our packaging can achieve different
Next, write the registration, followed by the personal page
updating. . .
2022/2/24 20:30
Because I have to go to work during the day, and I have to read e-books when I come back at night. No, I have to read the js source code when I come back, so I can't write it all at once, and I am very tired during the day. I like to record at night because of my hobby. I'm quite busy, so I will write every day after get off work. If it is of little help to you, please click a favorite for convenience when you find it.