Share the problems encountered in the process of developing the mall system and deal with them


Do two-way data binding for text box
< textarea placeholder = “please enter content” MaxLength = “120” V-model = “MSG” > < / textarea >
MSG: “” / / comment on the content entered in the data

Bind an event for the Publish button
< MT button type = “primary” size = “large” @ Click = “postcomment” > comment < / mt button >

Verify whether the comment content is empty. If it is empty, toast prompts the user that the comment content cannot be empty
Vue.http.options.root in main.js

//When using the post mode of Ajax, the third parameter is generally the same, so it is better to rewrite it every time. It is better to define it globally and omit the repeated writing process.
//Application / x-www-form-urlencoded form data format organization during global setting of post
Vue.http.options.emulateJSON = true;

Send a request through Vue resource to submit the comment content to the server
When the comment is OK, refresh the list to view the latest comments
If you call the getcomments method to refresh the comment list, you may only get the comments on the last page, but not the comments on the previous pages
Another way of thinking is: when the comment is successful, manually update a comment object on the client side, then call the unshift method of the array to append the latest comments to the beginning of comments in data; In this way, the need to refresh the comment list can be perfectly realized;
Want to develop the mall system development system project consultation V: kjwenlc, hope to help you!

postComment() {
  //Check whether it is empty. Trim() method removes the leading and trailing spaces of the string:
  if (this.msg.trim().length === 0) {
    Return toast ("comment content cannot be empty!");

  //Parameter 1: URL address of the request
  //Parameter 2: data object submitted to the server {content: this. MSG}
  //Parameter 3: define the format of data in the form when submitting {emulatejson: true}
    .post("api/postcomment/" + this.$, {
      content: this.msg.trim()
    .then(function(result) {
      if (result.body.status === 0) {
        //1. Splice a comment object
        var cmt = {
          user_ Name: "anonymous user",
          content: this.msg.trim()
        this.msg = "";

Transform the image analysis button to the link of the route and display the corresponding component page

<router-link to="/home/photolist">
< div class = "Mui media body" > picture sharing < / div >

import PhotoInfo from ‘./components/photos/PhotoInfo.vue’
{ path: ‘/home/photoinfo/:id’, component: PhotoInfo }

Draw the picture list component page structure and beautify the style

  1. Make the top slider
  2. Make a list of pictures at the bottom