JavaWeb 前端基础

最新推荐文章于 2024-07-17 14:19:40 发布

小黑月

最新推荐文章于 2024-07-17 14:19:40 发布

阅读量975

点赞数 15

文章标签：前端 java visual studio code

本文链接：https://blog.csdn.net/m0_61138839/article/details/139750217

版权

Web工作流程

浏览器前端服务器（前端程序）后端服务器（Java程序）数据库服务器

Web前端

一、HTML\CSS\JS

超文本标记语言负责网页结构\\层叠样式表负责网页表现\\负责网页行为

1.入门

HTML结构标签

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
    
    </body>
</html>

特点

HTML不区分大小写
HTML标签属性单双引号都可以
HTML语法松散

2.VS Code开发工具

官网：Visual Studio Code - Code Editing. Redefined

插件包：

中文语言包：Chinese（Simplified） Language Pack

拼写检查器：Code Spell Checker

HTML CSS Support

JavaScript (ES6) code snippets

Mithril Emmet

Path Intellisense

vue3-snippets-for-vscode

VueHelper

Auto Close Tag

Auto Rename Tag

Bracket Pair Color DLW

open in browser

Vetur

IntelliJ IDEA Keybindings

3.基础标签&样式

案例：

1.1标题排版

图片标签：<img>

标题标签：<1> - <6>

水平标签：<hr>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例:标题排版</title>
</head>
<body>
    <!--
    img标签：
        src：图片资源路径
        width：宽度(px ：像素 ；% ：相对于父元素百分比)
        height：高度 

    路径书写方式：
        绝对路径：
            绝对磁盘路径
            绝对网络路径
        相对路径：
            ./：当前目录
            ../：上级目录
     -->
    <img src="./img/img01.png">
    <h1>一级标题</h1>
    <hr>
    2024/6/11 周二 水平分割线
    <hr>
</body>
</html>

1.2标题样式

1.2.1标题颜色

CSS引入方式：

行内样式：写在标签的style属性中

<h1 style="color:aqua;">一级标题</h1>

内嵌样式：写在style标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例1:标题排版</title>

    <!-- 内嵌样式 -->
     <style>
        h1 {
            color: aqua;
        }
     </style>
</head>
<body>
    <img src="./img/img01.png" width="900pk">

    <h1>一级标题</h1>

    <hr>
    2024/6/11 周二 水平分割线
    <hr>
</body>
</html>

外联样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

02.1.css :

h1 {
    color: aqua;
}

link：

 <link rel="stylesheet" href="./css/02.1.css">

颜色表示形式：关键字、rgb表示法（红绿蓝三原色 0-255）、十六进制表示法

1.2.2CSS选择器

元素选择器：根据标签名设置样式

<style>
        span {
            color: #968d92;
        }
</style>

id选择器：给标签指定id属性值指定属性值设置样式

<style>
        #log {
            color: #968d92;
            font-size: 20px;
        }
</style>
... ...
<body>
    <hr>
    <span class="cls1">2024/6/11 周二</span> <span id="log">上下方有水平分割线</span>
    <hr>
</body>

类选择器：根据标签中指定的class设置样式（.class）

<style>
        .cls1 {
            color: #968d92;
        }
</style>
... ...
<body>
    <hr>
    <span class="cls1">2024/6/11 周二</span> <span>上下方有水平分割线</span>
    <hr>
</body>

优先级：ID > 类 > 元素

1.3超链接

标签：<a></a>

百度

2.1正文排版

视频标签：<video>

<video src="./video/video01.mp4" controls height="600pk"></video>

音频标签：<audio>

<audio src="./audio/audio01.flac" controls></audio>

段落标签：<p>

    <p>
        ----------这是第一段文字------------
    </p>

文本加粗标签：<b>/<strong>

    <p>
        <strong>----------</strong>这是第一段文字------------
    </p>
... ... ... ... ... ... ...
    <p>
        <b>----------</b>这是第一段文字------------
    </p>

2.2页面布局

盒子模型

内容区域：content

内边距区域：padding

边框区域：border

外边距区域：margin

布局标签

<div>：独占一行、可设宽高

<span>：一行可多个、不可设宽高

    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            box-sizing: border-box; 
            background-color: aquamarine;

            padding: 20px 20px 20px 20px;
            border: 10px solid red;
            margin: 30px;
        }
    </style>
</head>
<body>
    <div>
        A A A A A A A A A A A A A A A A A 
    </div>
</body>

案例1代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例1:标题排版</title>

    <link rel="stylesheet" href="./css/02.1.css">
    
    <style>

        #center {
            width: 65%;
            /* margin: 0% 17.5% 0% 17.5%; */
            margin: auto;
            border: 1px solid #968d92;
        }

        .cls1 {
            color: #968d92;
        }

        a {
            color:chartreuse;
            text-decoration: none;
        }

        p {
            text-indent: 35px;
            line-height: 30px;
        }

        #pright {
            text-align: right;
        }

    </style>

</head>
<body>
    <div id="center">
    <img src="./img/img01.png" width="777px"> 
    <h1>一级标题</h1>

    <span class="cls1">2024/6/11 周二</span> 下方有水平分割线
    <hr>
    
    <a href="https://www.baidu.com/index.htm" target="_blank"> 百度超链接 </a> 
    <br><hr>

    <video src="./video/video01.mp4" controls height="600pk"></video>
    <br><hr>
    <audio src="./audio/audio01.flac" controls></audio>

    <p>
        <b>--b加粗部分--</b>--这是第一段文字--
    </p>

    <p>
        <strong>--strong加粗部分--</strong>--这是第二段文字--
    </p>

    <p id="pright">
        ----右对齐部分----
    </p>
</div>
</body>
</html>

3.1表格标签

<table>：border、width、cellspacing

<tr>：行

<td>：单元格、表头单元格可以是<th>

<style>
    table {
        border-collapse: collapse; /* 合并相邻的边框 */
        border: 1px solid black; 
        
    }
    table td, table th {
        border: 1px solid black;
        width: 70px;
        text-align: center;
    } 
    </style>
... ... ... ... ... ... ...
<table>
        <tr>
            <th>Number</th>
            <th>Logo</th>
            <th>Name</th>
            <th>Describe</th>
        </tr>
        <tr>
            <td>1</td>
            <td>logo1</td>
            <td>name1</td>
            <td>describe1</td>
        </tr>        
        <tr>
            <td>2</td>
            <td>logo2</td>
            <td>name2</td>
            <td>describe2</td>
        </tr>
    </table>

3.2表单标签 <form> 主要负责数据采集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="" method="get">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="get提交">
    </form>

    <form action="" method="post">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">

        <input type="submit" value="post提交">
    </form>
</body>
</html>

表单项：

<input>：定义表单项

<select>：定义下拉列表，<option>定义列表项

<textarea>：定义文本域

type取值------------------------------描述

text-------------------------------------默认值，定义单行的输入字段

password----------------------------定义密码字段

radio----------------------------------定义单选按钮

checkbox----------------------------定义复选框

file-------------------------------------定义文件上传按钮

date/time/datetime-local------定义日期/时间/日期时间

number------------------------------定义数字输入框

email----------------------------------定义邮件输入框

hidden--------------------------------定义隐藏域

submit /reset /button-----------定义提交按钮 /重置按钮 /可点击按钮

... ... ...

属性：

action：规定当提交表单时向何处发送表单数据 URL

method：规定用于发送表单数据的方式 GET、POST

4.JavaScript

1、标签：<script>

2、引入方式：

2.1内部JS规范要求写在body标签中

    <script !src="">
... ... ... ... ... ...
    </script>

2.2外部JS

<script src="src/main/resources/script.js"></script>

3、基础语法

基础语法

注释
JS严格区分大小写
JS语句分号尽量写
JS会忽略多个空格和换行，可以对代码格式化

4、输出语句

    <script>
        alert("alert：这是我的第一行JS代码");

        document.write("document.write：向body中输出一个内容");

        console.log("console.log:向控制台输出内容");
    </script>

5、JS对象

Array

String

JSON

BOM：浏览器对象模型（Window 浏览器窗口对象、Navigator、Screen、History、Location 地址栏对象）

1、Window对象方法：对话框，返回boolean：confirm（"..."）

定时器，周期执行某一函数：setInterval（function（）{...}, 2000）;

定时器，延迟指定事件执行某一函数：setTimeout（function（）{...}, 2000）;

2、Location对象方法：

设置或返回完整URL：alert（location.href）

DOM：文档对象模型（Core DOM、XML DOM、HTML DOM）

根据document方法获取元素

1、根据id返回单个对象：let h1 = document.getElementById('h1');

2、根据标签名返回element对象数组：方法+遍历

3、根据name属性值获取返回element对象数组

4、根据class属性值获取返回element对象数组

6、DOM案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM案例</title>

</head>
<body>
    <img id="h1" src="./img/img02.png"> <br><br>
    <div class="cls">第一段文字</div> <br>
    <div class="cls">第二段文字</div> <br>

    <input type="checkbox" name="hobby"> 爱好1
    <input type="checkbox" name="hobby"> 爱好2
    <input type="checkbox" name="hobby"> 爱好3

</body>

<script>
    // 1.图片变色
    let img = document.getElementById('h1');
    img.src = "./img/img03.png";
    // 2.div标签后加上：文字注释（红色字体）
    let divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        const element = divs[i];
        element.innerHTML += "<font color = 'red'>文字注释</font>";
        
    }
    // 3.所有复选框呈现选中状态
    let ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const element = ins[i];
        element.checked = true;
    }
</script>

</html>

7、事件监听

1.事件绑定

方式一：

通过HTML标签中的事件属性进行绑定

    <input type="button" οnclick="changeColor()" value="修改图片颜色">
    <input type="button" οnclick="insertText()" value="添加文字注释">
    <input type="button" οnclick="allCheckBox()" value="全选复选框">
    ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
    <script>
    function changeColor() {
    // 1.图片变色
    let img = document.getElementById('h1');
    img.src = "./img/img03.png";
    }
    function insertText() {
    // 2.div标签后加上：文字注释（红色字体）
    let divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        const element = divs[i];
        element.innerHTML += "<font color = 'red'>文字注释</font>";
        
    }
    }
    function allCheckBox() {
    // 3.所有复选框呈现选中状态
    let ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const element = ins[i];
        element.checked = true;
    }
    }
</script>

方式二：

通过DOM元素属性绑定

    <input type="button" id="btn1" value="修改图片颜色">
    <input type="button" id="btn2" value="添加文字注释">
    <input type="button" id="btn3" value="全选复选框">
    ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...
    <script>
    document.getElementById('btn1').onclick = function changeColor() {
    // 1.图片变色
    let img = document.getElementById('h1');
    img.src = "./img/img03.png";
    }
    document.getElementById('btn2').onclick =  function insertText() {
    // 2.div标签后加上：文字注释（红色字体）
    let divs = document.getElementsByClassName('cls');
    for (let i = 0; i < divs.length; i++) {
        const element = divs[i];
        element.innerHTML += "<font color = 'red'>文字注释</font>";
        
    }
    }
    document.getElementById('btn3').onclick = function allCheckBox() {
    // 3.所有复选框呈现选中状态
    let ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const element = ins[i];
        element.checked = true;
    }
    }
</script>

2.常见事件

onclick ---------------------------------------- 鼠标单击事件

onblur ---------------------------------------- 元素失去焦点

onfocus -------------------------------------- 元素获得焦点

onkeydown --------------------------------- 某个键盘的键被按下

<input type="text" name="name" οnblur="function1()" οnfοcus="function2()" οnkeydοwn="function3()">

onload ---------------------------------------- 某个页面或图像完全被加载

<body οnlοad="function()">
    ......
</body>

onsubmit ------------------------------------ 当表单提交时触发该事件

    <form action="" method="post" οnsubmit="function()">
        用户名: <input type="text" name="username">
        年龄: <input type="text" name="age">
        <input type="submit" value="post提交">
    </form>

onmouseover ------------------------------ 鼠标被移到某个元素之上

onmouseover ------------------------------ 鼠标从某元素上移开

<table οnmοuseοver="function1()" οnmοuseοut="function2()">
    ......
</table>

3.案例1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM案例-通过HTML标签中的事件属性绑定</title>

</head>

<body>
    <img id="h1" src="./img/img02.png"> <br>
    <input type="button" οnclick="changeImg1()" value="还原图片">
    <input type="button" οnclick="changeImg2()" value="抹黑图片">
    <br><br>

    <span>聚焦后小写，离焦后大写</span>
    <input type="text" id="name" value="QQQQQQQQQQQQ" οnfοcus="lower()" οnblur="upper()">
    <br><br>


    <input type="checkbox" name="hobby"> 爱好1
    <input type="checkbox" name="hobby"> 爱好2
    <input type="checkbox" name="hobby"> 爱好3
    <br><br>

    <input type="button" οnclick="allCheckBox()" value="全选复选框">
    <input type="button" οnclick="allBackCheckBox()" value="反选复选框">
    <br><br>


</body>

<script>
    function changeImg1() {
        let img = document.getElementById('h1');
        img.src = "./img/img02.png";
    }
    function changeImg2() {
        let img = document.getElementById('h1');
        img.src = "./img/img03.png";
    }
    function allCheckBox() {
        let ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            const element = ins[i];
            element.checked = true;
        }
    }
    function allBackCheckBox() {
        let ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            const element = ins[i];
            element.checked = false;
        }
    }
    // 输入框聚焦后，展示小写；离焦后展示大写
    function lower() {
        let input = document.getElementById('name');
        input.value = input.value.toLowerCase();
    }

    function upper() {
        let input = document.getElementById('name');
        input.value = input.value.toUpperCase();
    }
</script>

</html>

二、Vue (基于MVVM前端框架，简化DOM操作，双向绑定)

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1、快速入门

插值表达式、 v-model

1.新建HTML页面，引入Vue.js文件

    <script src="./js/vue.js"></script>

2.在JS代码区域，创建Vue核心对象，定义数据模型

<script>
    new Vue({
        el:"#app",
        data: {
             message:"Hello Vue"
        }
    })
</script>

3.编写视图

<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}} // 插值表达式
    </div>
</body>

2、Vue常用指令

v-bind --------------------------------- 为HTML标签绑定属性值，如设置href、css样式等

v-model ------------------------------ 在表单元素上创建双向数据绑定

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

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

    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">
    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            url: "https://www.baidu.com"
        }
    })
</script>

</html>

v-on ----------------------------------- 为HTML标签绑定事件

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

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

    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">

        <input type="button" value="点击一下会弹窗1" v-on:click="handle()">
        <input type="button" value="点击一下会弹窗2" @click="handle()">

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            handle: function () {
                alert('这是点击按钮之后的弹窗');
            }
        }
    })
</script>

</html>

v-if ------------------------------------ 条件性的渲染某元素，判定为true时渲染，否则不渲染

v-else-if

v-else

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

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

    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60 ">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>
        <br><br>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

</html>

v-show ------------------------------- 根据条件展示某元素，区别在于切换的是display的值

    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人(35及以下)</span>
        <span v-else-if="age > 35 && age < 60 ">中年人(35-60)</span>
        <span v-else>老年人(60及以上)</span>
        <br><br>


        年龄<input type="text" v-model="age">经判定，为：
        <span v-show="age <= 35">年轻人(35及以下)</span>
        <span v-show="age > 35 && age < 60 ">中年人(35-60)</span>
        <span v-show>老年人(60及以上)</span>
        <br><br>
    </div>
    
前者走逻辑，后者将不符合的通过切换display渲染：
<span style="display: none;">年轻人(35及以下)</span>
... ...

v-for ----------------------------------- 列表渲染，遍历容器的元素或者对象的属性

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

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

    <script src="./js/vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-for="(address) in addresses">{{address}}</div>
    </div>
    <hr>
    <div id="app">
        <div v-for="(address,index) in addresses">{{address}} : {{index}}</div>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            addresses: ["q", "e", "w", "we", "frf"]
        },
        methods: {

        }
    })
</script>

</html>

案例2：表格数据渲染展示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例2</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            }, {
                name: "Rose",
                age: 22,
                gender: 2,
                score: 86
            }, {
                name: "Jerry",
                age: 19,
                gender: 1,
                score: 90
            }, {
                name: "Tony",
                age: 21,
                gender: 1,
                score: 50
            }]
        },
        methods: {

        }
    })
</script>

</html>

3、Vue生命周期（一个对象从创建到销毁的整个过程）

生命周期的八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

创建前后：beforeCreate、ctrated

挂载前、挂载完成：beforeMount、mounted

更新前后：beforeUpdate、updated

销毁前后：beforeDestroy、destroyed

比如：mounted（）

......
<script>
    new Vue({
        el: "#app",
        data: {

        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成，发送请求到服务器")
        }
    })
</script>
......

三、Ajax（异步交互技术，异步JS、XML）

1、作用

数据交换

异步交互

2、原生Ajax：

2.1 创建XMLHttpRequest对象：用于和服务器交换数据

2.2 向服务器发送数据

2.3 获取服务器响应数据

3、Axios（对原生Ajax进行了封装，简化书写快速开发）

官网：Axios中文文档 | Axios中文网

1.Axios入门

1.1 引入Axios的js文件

1.2 使用Axios发送请求，并获取响应结果

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios入门</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <input type="button" value="获取GET" οnclick="get()">
    <input type="button" value="删除POST" οnclick="post()">
</body>

<script>
    function get() {
        axios({
            method: "get",
            url: "......"
        }).then(result => {
            console.log(result.data);
        })
    }
    function post() {
        axios({
            method: "post",
            url: "......",
            data: "......"
        }).then(result => {
            console.log(result.data);
        })
    }
</script>

</html>

代码优化

... ...
<script>
    function get() {
        axios.get("...url...").then(result => {
            console.log(result.data);
        })
    }
    function post() {
        axios.post("...url...").then(result => {
            console.log(result.data);
        })
    }
</script>
... ...

2.案例3（基于Vue及Axios完成数据的动态加载展示）

4、前后端分离开发

1.介绍

--> 需求分析

--> 接口定义（API接口文档）

--> 前后端并行开发

--> 测试（前端、后端）

--> 前后端联调测试

2.YApi

接口文档管理平台

5、前端工程化

模块化、组件化、规范化、自动化

1.环境准备

Vue-cli（依赖环境NodeJS）：统一目录结构、本地调试、热部署、单元测试、集成打包上线

安装流程（安装过程中命令行记得随时重启，刷新状态）：

1.1 官网下载nodejs，安装并检查是否成功安装，命令行：

node --version
npm --version
npx --version

1.2 配置各项路径信息、配置淘宝镜像

npm config set prefix "D:\\node\\global"
npm config set cache "D:\\node\\cache"
npm config set registry "http://registry.npm.taobao.org"

1.3 配置环境变量

D:\node\global

D:\node\cache
此外：
0NODE_PATH : D:\node\global\node_modules

1.4 安装vue/cli，并检查

npm install -g @vue/cli
vue --version

PS:安装如果报错，可以尝试刷新镜像状态，输入以下两个命令之后重新尝试安装：
npm config set registry http://registry.cnpmjs.org
npm config set registry http://registry.npm.taobao.org

2.Vue项目简介

2.1 Vue项目-创建

1.新建Vue文件夹
2.打开文件夹在路径处打开cmd(可以使用管理员打开命令行)
3.命令行运行命令打开图形化界面：
    vue ui
4.根据需求创建项目
5.使用VSCode打开文件夹
6.vue项目启动：
    图形化界面npm脚本 || 命令行项目目录下 npm run serve

3.Vue项目开发流程

index.html
main.js
Vue组件文件以.vue结尾，三部分组成：
    <template> 模板部分 生成HTML代码
    <script> 控制模板数据来源和行为
    <style> css样式部分

四、Vue组件库Element--vue2已停维

官网：Element - The world's most popular Vue UI framework

1、快速入门

--在当前工程的目录下安装ElementUI组件库，命令行执行：

npm install element-ui@2.15.14

--引入ElementUI组件库（官方文档复制即可）：

main.js:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

--访问官网，复制组件代码调整

2、常用组件

--表格：

Table表格

--分页：

Pagination分页：数据量过多时，使用分页分解数据

--对话框：

Dialog对话框：保留当前页面状态，告知用户并承载相关操作

--表单：

Form表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

五、Element Plus

一个 Vue 3 UI 框架 | Element Plus

Web后端

Maven

SpringBoot

SpringMVC

MySQL

JDBC、Mybatis

会话跟踪

Filter、Interceptor

AOP

小黑月

关注

15
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb 前端基础

浏览器前端服务器（前端程序）后端服务器（Java程序）数据库服务器超文本标记语言负责网页结构\\层叠样式表负责网页表现\\负责网页行为HTML结构标签<html> <head> <title>标题</title> </head> <body> </body></html>特点HTML不区分大小写HTML标签属性单双引号都可以HTML
复制链接

扫一扫