@[toc]

preface

Originally, I wanted to talk about how to integrate the Markdown editor of the vue, but since the back end is not built, so I can’t upload pictures, so I won’t introduce it for now, and I will introduce how to do it later. It is worth mentioning that Markdown is really easy to use in vue. The Markdown component of vUE can directly convert Markdown documents into HTML files, and then I save them to the server (save path database) and render them directly to the front end. Unlike Django, when developing in MVT mode, you have to integrate edit.md by yourself. I also integrated some of the tutorial garbage on the web myself. If you want to leave a message here, I will send out the Markdown file.)

Results the preview

Here to explain is that I have not completely done, just to the shelf, to tell the truth, the personal page is really more difficult to do, and this is also to do user verification, divided into this user to visit their home page and others to visit their home page.

The project structure

Here there are five modules so it is divided into five VUE filesRouting registered

{
    path: '/space'.name: 'space'.component: Space,
    children:[
      {
        path: 'bokelist'.name: 'bokelist'.component: BokeList,
      },
      {
        path: "changeinfo".name: 'changeinfo'.component: Changeinfo,
      },
      {
        path: "changepic".name: "changepic".component: Changpic
      },
      {
        path: "spaceinfo".name: "spaceinfo".component: Spaceinfo,
      },
      {
        path: "wirterboke".name: "wirterboke".component: Wirterboke
      }
    ]
}
Copy the code

Personal page frame

This is done using Element UI

<template> <div style="background-color: white"> <el-container style="height: 800px; border: 1px solid #eee;" > <el-aside width="200px" style="margin-top: 1%" > <div style="width: 190px; background-color: white; padding: 5px; margin: auto"> <img v-model="user.userpic" v-bind:src="user.userpic" width="150px" height="150px" style="border-radius: 300px; margin-left: 8%"> <br> <br> <p style="margin:0 auto; text-align: center" v-model="user.username">{{user.username}}</p> </div> <br> <br> <el-menu :default-openeds="['1','2']"> <el-submenu index="1"> <template slot="title">< I class="el-icon-message"></ I > user center </template> <el-menu-item-group> <router-link class="alink" to="/space/spaceinfo"><el-menu-item index="1-1"> Personal information </el-menu-item></router-link> <router-link class="alink" to="/space/ Changepic "><el-menu-item index="1-2"> </el-menu-item></router-link> <router-link class="alink" to="/space/ Changeinfo "><el-menu-item index="1-3"> Modify information </el-menu-item></router-link> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i Class ="el-icon-menu"></ I > Blog management </template> < el-menu-itemgroup >< router-link class="alink" To ="/space/bokelist"><el-menu-item index="2-1"> </el-menu-item></router-link> <router-link class="alink" To ="/space/ Wirterboke "><el-menu-item index="2-2"> </el-menu-item></router-link> </ el-menu-itemgroup ></ el-submenu> </el-menu> </el-aside> <el-container style="background-color: white"> <el-main> <router-view/> </el-main> </el-container> </el-container> </div> </template> <script> export default { Name: "Space", beforeRouteEnter: (to, from, next) => {console.log(" Ready to enter personal information page "); let islogin = sessionStorage.getItem("isLogin") if(! islogin){ next({path:'/login'}); } next(); }, data() { return { user:{ userpic :"static/userpic/userpic.jpg", username: </script> <style scoped>. El-header {background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } .alink{ text-decoration: none; } </style>Copy the code

Here is the code for information display

<template>
<div>
  <div class="show">
    <p v-model="userinfo" style="margin-left:6%; margin-top: 5%">Nickname:<span style="margin-left: 3%; line-height:40px">{{userinfo.username}}</span></p>
    <p v-model="userinfo" style="margin-left:6%; margin-top: 5%">Gender:<span style="margin-left: 3%; line-height:40px">{{userinfo.usersex}}</span></p>
    <p v-model="userinfo" style="margin-left:6%; margin-top: 5%">Email address:<span style="margin-left: 3%; line-height:40px">{{userinfo.useremail}}</span></p>
    <p v-model="userinfo" style="margin-left:6%; margin-top: 5%">Brief introduction:<span style="margin-left: 3%; line-height:40px">{{userinfo.userjianjie}}</span></p>
  </div>
</div>
</template>

<script>
// It is better to wait for the jump to this point before loading the data
import {userinfo} from ".. /.. /userinfo/userinfo"
export default {

  name: "spaceinfo".data(){
    return{
      userinfo: userinfo

    }
  }
}
</script>

<style scoped>
.show{
  margin: 100px auto;
  width: 80%;
  height: 450px;
  border: 5px solid lightcyan;
  transition: all 0.9 s;
  border-radius: 10px;

}

.show:hover{
  box-shadow: 0px 15px 30px rgba(0.0.0.0.4);
  margin-top: 90px;
}
</style>

Copy the code

conclusion

Here is still only a general framework, if necessary or according to the structure to change, there is no way to directly take over. So the progress is good.

Then try to get most of the work done this week and open source so I can start back end development next week.