前端学习

前端学习

页面构建技术

低代码平台

AMIS 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

Magic-api 是基于Java的接口快速开发框架，编写接口将通过magic-api提供的UI界面完成，自动映射为HTTP接口，无需定义Controller、Service、Dao、Mapper、XML、VO等Java对象即可完成常见的HTTP API接口开发

html 快速入门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <!-- <style>
        /* CSS样式 */
        h1 {
            color: blue;
        }
    </style> -->
    <link rel="stylesheet" href="css/new.css">
</head>
<body>
    <h1>
        这是我的第一个HTML页面
    </h1>
    <!-- table标签：
       <tr>：行
       <td>：单元格
       <th>：表头
       <caption>：表格标题
       <colgroup>：表格列组
       <col>：表格列
       <thead>：表格头部
       <tbody>：表格主体
       <tfoot>：表格底部 -->
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
        </tr>
    </table>
    <!-- form表单属性：
        action：提交地址
        method：提交方式（get、post） -->
    <form action="url" method="post">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

表单标签

image-20240425152211157

javascript

image-20240425152732437

变量

image-20240425153057626

image-20240425153331721

对象

1
2
var list = new Array(1,2,3,4)
var str = "string"

image-20240425153649189

1
2
3
4
5
6
7
8
var user = {
    name:"tom",
    age:20,
    eat: function(){
        alert("吃饭！")
    }
}
user.eat();

BOM

image-20240425154012181

1
2
3
4
5
6
<script>
        setInterval(function() {
            console.log("Hello, World!");
            // 执行其他操作
        }, 1000);
    </script>

DOM

image-20240425193237502

获取dom对象：

image-20240425193427565

HTML DOM Document 对象 (w3school.com.cn)

事件

image-20240425195545598image-20240425195627327

Vue

入门程序

image-20240425200548452

常用指令

image-20240425200623020

v-bind 和 v-model

v-model绑定表单数据

image-20240425200821220

事件绑定

image-20240425201059477

条件渲染

image-20240425201321967

image-20240425201653614

生命周期

image-20240425202346491

axios

image-20240425205930941

image-20240425210113350

vue项目构建

创建项目

1
vue ui

目录作用

image-20240425211625234

image-20240425211708574

main.js

前端 - Vue 应用里 main.js 的作用 - 待注销 - SegmentFault 思否

main.js负责初始化Vue应用实例、加载全局配置、注册全局组件、引入插件以及挂载Vue实例到DOM上。通过main.js，我们可以配置Vue应用的各种选项、引入需要的库或者插件，以及进行一些全局的初始化操作。

image-20240425212809146

element-ui

组件官网：https://element.eleme.cn/#/zh-CN/component/

引入流程

image-20240427102720502

安装axios

image-20240427162057800

vuerouter路由

image-20240427165926414

路由切换

image-20240427203045644

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const routes = [
  {
    path: '/',
    redirect: '/layout' 
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
}
1
2
3
4
5
6
<router-link to="/layout">
    选项1
</router-link>
<router-link to="/element">
    选项2
</router-link>

踩过前端的坑！

前端默认传入的参数是对象，参数会变成{ json }形式传输！

1
2
3
4
5
6
7
export function listDeptById(params) {
    return request({
        url: "/admin/sysDept/listDeptById",
        params: params,
        method: "get",
    });
}

如果只要传一个参数，需要用json格式传入！不然后端将无法获取！

1
2
3
4
5
6
7
listDeptById({deptId:100}).then((res) => {
              console.log('Received data:', res); // 这里将打印接收到的数据
              this.menuOptions = [res.data];
            })
            .catch((error) => {
              console.error('Error fetching data:', error); // 如果有错误，这里会打印错误信息
            });