1、前端環境準備
 2、nodejs入門
 3、Npm包管理器
 4、Vue入門及雙向綁定
 5、Vue事件
 6、Vue路由
 7、Axios

1、前端環境準備

這是一個前後端分離的時代，學習前端就要用前端專用的軟件，首先要配置前端開發的環境。
開發工具用的是VsCode，一般推薦使用這個，也可以用idea。
VsCode地址：https://code.visualstudio.com/Download,不需要更改什麼東西，無腦安裝即可。
安裝好軟件之後，最好先漢化，如下圖所示：
在之後html代碼測試中，還需要live serve，在vscode商店中安裝live Server，方便後面進行測試

還需要一個安裝環境，nodejs，根據什麼樣的系統下載對應的安裝包。
nodejs地址：http://nodejs.cn/download/
如何驗證安裝好了呢？

VsCode可以正常打開
nodejs
- 1、環境變量配置
- 2、判斷版本

2、nodejs入門

首先要確定安裝nodejs安裝完畢。
nodejs就是一個在服務器端能運行javascript的環境！

程序一：

打開軟件，新建文件夾，打開文件夾,新建一個js文件，然後在終端打開輸入命令node 文件名，就會看到命令行的輸出命令。node環境執行js文件，

程序二：

寫代碼：設置響應頭文件，發送數據到前端界面

const http = require('http')
http.createServer(function (request, response) {
  // 設置響應頭文件
  response.writeHead(200, { 'Content-Type': 'text/plain' })
  // 發送數據
  response.end("hello,server")
}).listen(8080)

console.log("server is running... port:8080")

在控制檯實現：用node 02-serverapp.js實現

結果：訪問localhost:8080

3、Npm包管理器

什麼是npm？
就是前端版的maven，全球最大的前端生態模塊，前端所有的依賴在這裏都有，
maven中的依賴是pom.xml。
npm中的是package-lock.json。
npm一些常用命令：

npm init -y 初始化一個基本的配置文件
# 自動更新目前所有的依賴，拿到一個程序後，不會打包這些依賴，我們需要自己讓他自動導包
npm install 
# 安裝環境 npm install 包名 -g(全局)
npm install express -g
# npm 默認倉庫在國外，設置鏡像到淘寶
npm config set regisry http://registry.npm.taobao.org
npm config list

# npm install 依賴
npm install jquery
# 安裝指定版本
npm install jquery@3.4.1

# --save-dev 或 -D 代表這個只在開發環境中有效，不會打包出去
# --save-dev 或 -D 開發時候的語法檢測工具
npm install --save-dev eslint
npm install -D eslint

# 自動下載項目中的依賴package.json
npm install

# 自動更新包名
npm update 包名
# 卸載某個包
npm uninstall

# 後面開發基於ES6，但瀏覽器支持的是es5規範，所以需要webpack打包，自動將es6轉爲es5（用cmd以管理員身份運行）
npm install -g webpack webpack-cli
webpack -v

# 安裝babel-cli（以管理員身份運行）
npm install -g babel-cli
babel --version

前端一些組件啥的安裝都是用npm

4、Vue入門及雙向綁定

4.1、什麼是vue？

vue是前端框架，核心只關注視圖層
核心思想：MVVM,
官方學習文檔：https://cn.vuejs.org/v2/guide/

先把vue下載下來， npm install vue,習慣性在這個目錄下新建一個lib目錄，把vue.js放到這個文件夾下

新建第一個程序文件:hello,vue

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 純始圖代碼 -->
        <div id="app">
            {{msg}}
        </div>


        <!-- 數據和視圖層分離 -->
        <!-- vue -->
        <script src="./lib/vue.js"></script>
        <!-- 雙向綁定，只要數據發生變化吧，前端顯示及時發生變化 -->
        <script>
            //創建vue對象，綁定視圖層
            var vue = new Vue({
                el:'#app', //綁定視圖
                data:{ //定義要給前端的數據，頁面所有的數據都來自這裏
                    msg:'hello.vue'
                }
            })
        </script>
        
    </body>
</html>

右鍵在瀏覽器打開

結果：

例子2：基本數據渲染

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 純始圖代碼 -->
        <div id="app">
            <h1 v-bind:title="msg">我是標題</h1>
        </div>

        <script src="./lib/vue.js"></script>
        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                    msg:'time:'+new Date().toLocaleString()
                }
            })
        </script>
        
    </body>
</html>

結果：

案例3：雙向綁定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 純始圖代碼 -->
        <div id="app">
            <!-- v-bind 綁定屬性 -->
          <input type="text" v-bind:value="serachMap.keyword">
          <!-- v-model 雙向綁定指令 -->
          <input type="text" v-model="serachMap.keyword">
        </div>

        <script src="./lib/vue.js"></script>
        <!-- 雙向綁定，只要數據發生變化吧，前端顯示及時發生變化 -->
        <script>
            var vue = new Vue({
                el:'#app',
                data:{//定義要給前端的數據，頁面的多有數據都來自這裏
                   serachMap:{
                       keyword:'yang'
                   }
                }
            })
        </script>
        
    </body>
</html>

結果：在瀏覽器中打開

4.2、MVVM:

M：模型數據
V：視圖
VM：雙向綁定，只要數據發生變化，前端顯示也會立即變化

5、Vue事件 v-on(@)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- 所有v-開學的都是vue指令 -->
            <!-- 按鈕綁定事件 -->
           <button @click ="search()">查詢</button>
           <p>你要查詢的是：{{result.title}}</p>
           <p>
               <a v-bind:href="result.site" target="_blank"> 
                {{result.title}}
               </a>
           </p>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                   searchMap:{
                       keyword:'yy'
                   },
                   result:{}
                },
                methods:{//事件
                    search(){
                        console.log("search")
                    this.result={
                        //todo
                        "title":"yy",
                        "site":"https://blog.csdn.net/love_to_share"
                    }
                    }
                }
            })
        </script>
        
    </body>
</html>

結果：
點擊yy鏈接會跳轉到我的博客首頁。

6、Vue路由

路由：頁面鏈接跳轉，前端可以用a標籤跳轉，但是vue不可以，用路由就可以實現頁面內跳轉。
準備工作，新建文件夾在終端打開，下載vue和vue-router，在這個文件夾下建一個lib目錄，把vue.js與vue-router.js放進lib中，編寫html代碼

npm install vue
npm install vue-router

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <h1>Hello,App!</h1>
    <p>
      <router-link to="/">首頁</router-link>
      <router-link to="/student">學員管理</router-link>
      <router-link to="/teacher">講師管理</router-link>
    </p>
    <!-- 顯示view -->
    <router-view></router-view>
  </div>

  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-router.js"></script>
  <script>
    //1、定義路由的組件
    const welcome = { template: '<div>歡迎</div>' }
    const student = { template: '<div>Student List</div>' }
    const teacher = { template: '<div>Teachet List</div>' }

    //2、定義路由
    const routes = [
      { path: '/', redirect: '/welcome' },
      { path: '/welcome', component: welcome },
      { path: '/student', component: student },
      { path: '/teacher', component: teacher }
    ]

    // 3、創建 router實例
    const router = new VueRouter({
      routes: routes //
    })

    // 掛載路由
    new Vue({
      el: '#app',
      router
    })

  </script>

</body>

</html>

結果：

7、Axios

異步通信，與ajax相似
準備工作，還是新建一個文件夾，下載依賴，放到lib目錄下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="getList()">測試</button>
        <table>
          <!-- 循環 v-for-->
          <tr v-for="list in lists">
            <td>{{list.id}}</td>
            <td>{{list.name}}</td>
          </tr>
        </table>
      </div>
    
      <script src="./lib/vue.js"></script>
      <script src="./lib/axios.js"></script>
      <script>
        var vue = new Vue({
          el: '#app',
          data: {
            lists: []
          },
          methods: {
            // 前後端分離開發中，前端接收數據並渲染，後臺只用提供json數據
            getList() {
                // 可以在本地新建一個json數據文件，用來測試ajax請求
              axios.get('http://localhost:8110/admin/edu/teacher').then(response => {
                console.log(response)
                // 後端接收的值交給前端的vue管理
                this.lists = response.data.data.items
              })
            }
          }
        })
      </script>
</body>
</html>

[
    {"id":1,"name":"滷蛋"},
    {"id":2,"name":"阿珂"},
    {"id":3,"name":"凱爹"}
]

Vue入門瞭解

1、前端環境準備

2、nodejs入門

3、Npm包管理器

4、Vue入門及雙向綁定

4.1、什麼是vue？

4.2、MVVM:

5、Vue事件 v-on(@)

6、Vue路由

7、Axios

數據庫錯誤總結筆記

java面向對象---繼承

SpringMVC---JSON入門

java常用類---Scanner類和String類

Servlet中的一些小知識點

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結