Vueカスタムコンポーネント&&非同期リクエスト

61552 ワード

Vueカスタムコンポーネント&&非同期
Vueの高度な使用
カスタムコンポーネント

    Element    ，                 。   <el-button>   <button>   
    
    ，               Vue   ，

定義フォーマット

Vue.component(    , {
        props:     ,
        data:        ,
        template:          
})

         
    
 <script src="vue/vue.js">script>
 
 <div id="div">
     
     <student myname="zgan" age="18">
     student>
 div>

<script>
    Vue.component("student",{
     //             
     props:["myname","age"],
    
     template: `
      //             ,          
         {{myname}}
         {{age}}
     
     `,
     //    
     data:function(){
         return {}
     }
 });
 new Vue({
     el:"#div"
 });
cript> 
    
script>

Veeライフサイクル

ライフサイクルの8段階

≪ステータス｜Status｜emdw≫
ステージ
beforeCreate
作成前
created
作成後
beforeMount
ロード前
mounted
ロード後
beforeUpdate
更新前
updated
更新後
beforeDestroy
破棄前
destroyed
破棄後
Vue非同期動作

はVueで非同期要求を送信し、本質的にはAJAXである.axiosというプラグインを使用して、

の操作を簡略化することができます.

  
    1.    axios    js   。
    2.    axios             。
    3.    axios              。

axios一般的な方法

メソッド名
さぎょう
get(要求されたリソースパスと要求されたパラメータ)
GET方式リクエストの開始
post(要求されたリソースパス、要求されたパラメータ)
POST方式要求の開始
then(response)
リクエストに成功したコールバック関数はresponseで応答するデータを取得します
catch(error)
リクエストに失敗したコールバック関数はerrorでエラー情報を取得します

 new Vue({
        el:"#div",
        data:{
            name:"  "
        },
        methods:{
            send(){
                // GET    
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })

                // POST    
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });

iframeラベルの使用

//  ：                
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello world</h1>
<iframe src="login.html" frameborder="false" style="top:80px;left: 120px; width: 100%;height:500px"></iframe>
</body>
</html>

総合事例学生管理システム
1.工事導入に関する問題

1. jar   
     1. servlet   jar    （alt + enter    ，   javax-servlet-api.jar）
     2. web-inf   libs     ，   lib.     classnotfoundException 
    
2. filter    
    filter      ，

2.後端先端準備

1     
              （USER   ）//    user     ,
    //         ,       ,       sql       
2. mybatis      
3.          
4. filter   

           html

3.ログイン機能の実現
構造ができたら
1.0 sql

SELECT * FROM user WHERE username=#{username} AND password=#{password}

2.0 daoレイヤの作成


public interface UserMapper {
    /*
            
     */
    @Select("SELECT * FROM user WHERE username=#{username} AND password=#{password}")
    public abstract List<User> login(User user);
}

3.0サービス作成

aインタフェース作成

/*
           
 */
public interface UserService {
    /*
            
     */
    public abstract List<User> login(User user);
}

b.実装クラス

public class UserServiceImpl implements UserService {
    @Override
    public List<User> login(User user) {
        InputStream is = null;
        SqlSession sqlSession = null;
        List<User> list = null;
        try{
            //1.        
            is = Resources.getResourceAsStream("MyBatisConfig.xml");

            //2.  SqlSession    
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);

            //3.  SqlSession      SqlSession  
            sqlSession = sqlSessionFactory.openSession(true);

            //4.  UserMapper        
            UserMapper mapper = sqlSession.getMapper(UserMapper.class);

            //5.            
            list = mapper.login(user);

        }catch (Exception e) {
            e.printStackTrace();
        } finally {
            //6.    
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        //7.        
        return list;
    }
}

4.0 servlet制御層

package com.itheima.controller;

import com.itheima.bean.User;
import com.itheima.service.UserService;
import com.itheima.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    private UserService service = new UserServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //         
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1.      
        String username = req.getParameter("username");
        String password = req.getParameter("password");

        //2.  User  
        User user = new User(username,password);

        //3.          
        List<User> list = service.login(user);

        //4.         
        if(list.size() != 0) {
            //           
            req.getSession().setAttribute("username",username);
            //      true
            resp.getWriter().write("true");
        }else {
            //      false
            resp.getWriter().write("false");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}

4.ページング照会学生機能
バックエンド
1.0 sql

SELECT * FROM student  -- [ limit 0,10]

2.0 daoレイヤ作成

public interface StudentMapper { 
    //       
    @Select("SELECT * FROM student")
        public abstract List<Student> selectAll()
}

3.0サービス作成(ページングクエリー)

インタフェース作成

public interface StudentService {
 /*
           
     */
    public abstract Page selectByPage(Integer currentPage, Integer pageSize);

実装クラス

 /*
              
     */
    @Override
    public Page selectByPage(Integer currentPage, Integer pageSize) {
        InputStream is = null;
        SqlSession sqlSession = null;
        Page page = null;
        try{
            //1.        
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.  SqlSession    
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.  SqlSession      SqlSession  
            sqlSession = sqlSessionFactory.openSession(true);
            //4.  StudentMapper       
            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
            //5.      
            page = PageHelper.startPage(currentPage,pageSize);
            //6.             
            mapper.selectAll();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //7.    
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }

        //8.        
        return page;
    }

4.0 servlet制御層

@WebServlet("/studentPageServlet")
public class StudentPageServlet extends HttpServlet {
    private StudentService service = new StudentServiceImpl();
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //         
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //1     
        String method = req.getParameter("method");

        String currentPage = req.getParameter("currentPage");
        String pageSize = req.getParameter("pageSize");

        //          
        Page page = service.selectByPage(Integer.parseInt(currentPage), Integer.parseInt(pageSize));
        //  
        PageInfo info = new PageInfo(page);
        // info   json
        try {
            String s = new ObjectMapper().writeValueAsString(info);
            resp.getWriter().write(s);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


}

フロントエンド

//      
            selectByPage(){
                axios.post("studentServlet","method=selectByPage&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize)
                    .then(resp => {
                        //         tableData
                        this.tableData = resp.data.list;
                        //      
                        //   
                        this.pagination.currentPage = resp.data.pageNum;
                        //   
                        this.pagination.total = resp.data.total;
                    })
            },

5.生徒の追加

バックエンドステップ

1. sql  
    insert into student values(007, 'zhangsan', '2000-01-01', 'dongguan')
2. dao  
    @Insert("insert into student values(#{number}, #{name}, '2000-01-01', #{address})")
    void insertStudent(Student student);
3. service  
      dao 
4.  1. servlet  service
    2.

service層

           
     */
    @Override
    public void addStu(Student stu) {
        InputStream is = null;
        SqlSession sqlSession = null;
        try{
            //1.        
            is = Resources.getResourceAsStream("MyBatisConfig.xml");
            //2.  SqlSession    
            SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(is);
            //3.  SqlSession      SqlSession  
            sqlSession = sqlSessionFactory.openSession(true);
            //4.  StudentMapper       
            StudentMapper mapper = sqlSession.getMapper(StudentMapper.class);
            //5.           
            mapper.addStu(stu);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            //6.    
            if(sqlSession != null) {
                sqlSession.close();
            }
            if(is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

servlet

   //      
        Map<String, String[]> map = req.getParameterMap();
        String currentPage = req.getParameter("currentPage");
        String pageSize = req.getParameter("pageSize");

        //  Student  
        Student stu = new Student();

        //         
        dateConvert();

        try {
            BeanUtils.populate(stu,map);
        } catch (Exception e) {
            e.printStackTrace();
        }

        //          
        service.addStu(stu);

        //          
        try {
            resp.sendRedirect(req.getContextPath() + "/studentServlet?method=selectByPage&currentPage=" + currentPage + "&pageSize=" + pageSize);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

フロントエンドステップ

1.       
2.       （               ）
3.      
   1.     
   2.     
   3.           ，          


addStu(){
                let param = "method=addStu&number=" + this.formData.number + "&name=" + this.formData.name +
                        "&birthday=" + this.formData.birthday + "&address=" + this.formData.address +
                        "&currentPage=" + this.pagination.currentPage + "&pageSize=" + this.pagination.pageSize;
                axios.post("studentServlet",param)
                    .then(resp => {
                        //         tableData
                        this.tableData = resp.data.list;
                        //      
                        //   
                        this.pagination.currentPage = resp.data.pageNum;
                        //   
                        this.pagination.total = resp.data.total;
                    })
                //      
                this.dialogTableVisible4add = false;
            },

6学生の削除
バックエンド

1. sql
2. dao
3. service
4. servlet
   1.     ，number
   2.     ，

フロントエンド

1.           

   1.            
   2.     
   3.     

2.      
    //            result true，   false
                let result = confirm("     10032  ?")

7修正
バックエンド

1. sql
2. dao 
3. service
4. servlet
   1.     （student  ）
   2.   service    
   3.

フロントエンド

1.     
2.     
   1.        vue     
3.          
   1.     
   2.     
   3.     （  ）
   4.

Vue.jsにおけるdata,propsおよびcomputedデータ

laravel + vue.js環境構築