谷粒学院(三)

最新推荐文章于 2023-10-28 18:27:52 发布
最新推荐文章于 2023-10-28 18:27:52 发布
阅读量307 收藏 1
点赞数 1
分类专栏： java 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouhe_/article/details/120877911
版权

文章目录


ECMAScript 6

ECMAScript 6.0 （以下简称 ES6）是javaScript语言的下一代标准，已经在2015 年 6月正式发布了。他的目标 使JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言

基本语法

let声明变量

let 与 var的区别：

  • let 定义的变量在一个局部作用域中(就是一个{}中)，var 定义的变量在全局作用域名
  • 一个变量名，let的只可以声明一次，var 可以声明多次

const声明常量

声明常量必须赋值，且不允许改变

解构赋值

  • 数组解构

    let [x,y,z] = [1,2,3];
console.log(x,y,z);

  • 对象解构

    var person = {name:"zhangsan",age:13};
let {name,age} = person;
console.log(name,age)

模版字符串

`` 配合 ${} 使用，可以在字符串中加入 变量 和 表达式

// 传递变量
var name = "zhangsan";
var age = "13";
var str = `my name is ${name},my age is ${age}`;
console.log(str);
// 传递表达式
function f(){
    return "hello world";
}
console.log(`es6 ${f()}`)

声明对象简写

var name = "zhangsan";
var age = "13";
var person = {name,age};
console.log(person);

方法的简写

// 常规写法
const p1 = {
    eat:function() {
        console.log("eat1")
    }
}

// 简写方法
const p2 = {
    eat(){
        console.log("eat2")
    }
}
p1.eat();
p2.eat();

对象拓展运算符

对象复制 & 对象合并

// 对象复制
var person = {name:"zhangsan",age:13};
var newPerson = {...person};
console.log(newPerson);
// 对象合并
var n = {name:"lisi"};
var a = {age:14};
var p = {...n,...a}
console.log(p);

箭头函数

var fun = (a,b)=>a+b;
console.log(fun(3,2));

VUE

入门案例

<body>
    <div id="app">
    {{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello Vue"
        }
    })
</script>

在vs code中创建代码片段

文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets

注意：制作代码片段的时候，字符串中如果包含文件中复制过来的“Tab”键的空格，要换成“空格键”的空格

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",

            "    <meta charset=\"UTF-8\">",

            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",

            "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",

            "    <title>Document</title>",

            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }

单向绑定 与 双向绑定

v-bind:filedName => 单向绑定 属性绑定

v-model => 双向绑定

<body>
    <div id="app">
      单向绑定：  <input type="text"  v-bind:value="msg">
      双向绑定：  <input type="text" v-model="msg" >
      {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:"hello"
            }
        })
    </script>
</body>

事件绑定

v-on:XXX <=> @XXX

XXX :事件名

<body>
    <div id="app">
      <button v-on:click="search()">查询1</button>
      <button @click="search()">查询2</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {},
            methods:{
                search(){
                    console.log("点击了按钮")
                }
            }
        })
    </script>
</body>

修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为 v-on:事件.prevent

<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmit()">
            <input type="text" v-model="msg">
            <input type="submit" value="提交" >

        </form>
  
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods:{
            onSubmit(){
                if(this.msg.length > 0){
                    alert("去提交了")
                }else{
                    alert("请输入值")
                }
            }
        }
    })
</script>

条件渲染

V-for

<body>
    <div id="app">
      <input type="checkbox" v-model="ok"> 是否选择
      <span v-if="ok">哈哈哈哈哈</span>
      <span v-else>呵呵呵呵</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:true
            }
        })
    </script>
</body>

循环遍历

<body>
    <div id="app">
        <!-- 普通遍历 -->
        <ul>
            <li v-for="(item,index) in 10">{{item}} ---- {{index}}</li>
        </ul>
        <!-- 遍历数组 -->
        <table width="200" border="1">
            <tr v-for="item in list">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list:[
                    {name:"zhangsan",age:13},
                    {name:"lisi",age:14},
                    {name:"wangwu",age:15}
                
                ]
            }
        })
    </script>
</body>

axios的使用和new Vue({})的基本格式

<body>
    <div id="app">

        <template v-for="item in userList">
            <div> {{item.name}} ----> {{item.age}}</div>
        </template>
    </div>
    <!-- 导包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[]
            },
            created(){
                this.getData();
            },
            methods:{
                getData(){
                    axios.get("user.json")
                        .then(res=>{
                            console.log("获取成功",res)
                            this.userList=res.data.data
                        })
                        .catch(err=>{
                            console.log("获取失败",err)
                        })
                }
            }
        })
    </script>
</body>

Element-ui

element-ui 是饿了么前端出品的基于Vue.js的后台组件库，方便程序猿进行页面快速布局和构建

官网： https://element.eleme.cn

Node.js

What node.js?

  1. 之前学习过java,运行java需要安装jdk环境

    学习的这个node.js,是JavaScript的运行环境，用于执行javaScript代码，不需要浏览器，直接使用node.js运行javaScript代码

    需要安装 node.js

  2. 模拟浏览器效果，比如tomcat

使用node.js 执行javaScript代码

node hello.js

NPM

一.简介

什么是NPM？

NPM 全称是 Node Package Manager，是Node.js包管理工具，是全球最到的模块生态系统，里面的所有模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven

NPM工具的安装位置

我们通过npm可以很方便的下载js库，管理前端工程

Node.js 默认安装的npm包和工具的位置：Node.js目录/node_modules

查看当前版本： npm -v

二.使用npm管理项目

1.项目初始化

创建一个项目文件夹

cmd 进入 使用命令： npm init [-y]

2.修改npm镜像
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list
3.npm install 命令

安装指定包： npm install jquery

安装指定版本包： npm install jquery@2.1.x

项目到打包到生产环境不包含的依赖：npm install -D eslint

全局安装：npm install -g webpack

4.其他命令
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

Babel

一.简介

Babel 是一个广泛使用的转码器，可以将ES6代码转换为ES5代码，从而在现有的环境执行。

这意味，您可以现在就用ES6 编写程序，而不用担心现有的环境是否支持

二.安装

Babel提供babel-cli 工具，用于命令行转码。安装命令如下：

npm install --global babel-cli
#查看是否安装成功
babel --version

三.Babel 的使用

1.初始化项目

npm init -y

2.创建文件

例如： hello.js

3.配置 .babelrc

Babel的配置文件是 .babelrc ,存放在项目的跟目录下，该文件用来转码规则和插件

{
    "presets": ["es2015"],
    "plugins": []
}
4.安装转码器

项目中安装

npm install --save-dev babel-preset-es2015
5.转码
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js
# 整个目录转码
mkdir dist2

# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

模块化

什么是模块化？

1.开发后端接口时，开发controller, service,mapper,controller注入service，service注入mapper,在后端中，类与类之间的调用称为后端的模块化操作

2.前端模块化，在前端中，js 与 js 之间的调用称为 前端模块化操作

一.es5实现模块化操作

t1.js

const a = function(){
    console.log("helloAAAA")
}
const b = function(){
    console.log("helloAAAA")
}

module.exports={
    a,
    b
}

t2.js

const t1 = require("./t1.js")
t1.b();

二.es6实现模块化操作

注意： 如果使用es6写法实现模块化操作，在node.js 环境中能直接运行的，需要使用babel把es6 代码转换为 es5 代码，才可以在 node.js 进行运行

  1. 方式一

    t1.js

    
export function a(){console.log("hello worldAAA")};
export function b(){console.log("hello worldBBB")};

    t2.js

    import t1 from "./t1.js"
t1.a();
t1.b()

  2. 方式二

    t1.js

    export default{
  a(){console.log("hello worldAAA")},
  b(){console.log("hello worldBBB")};
}

Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

一、Webpack安装

全局安装：npm install -g webpack webpack-cli

查看版本： webpack -v

二.初始化项目

  1. 创建 webpack文件夹

    进入webpack 目录

    执行命令 npm init -y

  2. 创建src文件夹

  3. src 下创建 common.js

    exports.info = function (str) {
       document.write(str);
}

  4. src 下创建 utils.js

    exports.add = function (a, b) {
        return a + b;
    }
  5. src下创建main.js
    const common = require('./common');
const utils = require('./utils');
common.info('Hello world!' + utils.add(100, 200));

    三.js打包

1.webpack目录下创建配置文件webpack.config.js、

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

2.命令行执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

另一种方式：

也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
    //...,
    "dev": "webpack --mode=development"
 }
运行npm命令执行打包
npm run dev

3**.webpack目录下创建index.html**

// 引用bundle.js

<body>
    <script src="dist/bundle.js"></script>
</body>

4**.浏览器中查看index.html**

项目前端页面的搭建

一,快速搭建

  1. 下载vue-admin-template

    https://gitee.com/quick_dev/vue-admin-template/repository/archive/master.zip

  2. 解压到工作区

    改名

  3. 安装依赖

    npm install

  4. 启动项目

    npm run dev

归去来兮★
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【谷粒学院】项目总结
qq_45765600的博客
05-26 3598
谷粒学院项目总结
毕业设计论文~非常好，高分论文哦
02-20
这是学生毕业设计，老师修改，并且通过的高分论文 一定会对你有帮助（附带模板的）
尚硅谷项目谷粒学院（毕业设计论文版）:源码加论文，无bug完美运行，符合毕业设计，两份不同目录的论文可选，字数均在两万字以上，时序图，er 图，功能模块图，用例图。开题报告答辩ppt均有
最新发布
wighfvg的博客
10-28 887
为了提高学生的学习效果，开发基于Spring Cloud的在线教育平台，该系统通过课程知识点设计，老师在在线教育平台添加自己的相关介绍以及发布课程信息、小节视频等，学生可以根据课程信息，教师信息选择自己需要的课程进行学习。本系统是出于高校学生自主学习，无论是在家还是在学校，大大降低人力付出成本，实现良好的学习内容信息化、透明化效果。另外也能够使教师与教师、教师与学生更有效的沟通协作，方便老师对发布的学习视频等多方面进行统计分析;通过信息化管理，提高学生学习效率。
2022谷粒学院BUG记录
Sanericecho的博客
06-01 1227
前言（一点废话）都2022年了，不会还有人在学谷粒学院吧（doge），最近做毕设，学完了ssm，决定用谷粒学院做项目参考，发现现在计算机行业各种贩卖焦虑，什么Java烂大街了，学Java找不到工作，Java太卷之类的，也不知道学完这个是否真的都找不到一份Java工作，果然躺平才是唯一出路吗，哈哈，开个玩笑；
谷粒商城-Day03
weixin_43877332的博客
06-14 185
1.pms商品管理系统的介绍 首先明确两个概念：SKU和SPU SKU：Stock Keeping Unit(库存量单元),即库存进出计量的单位， 可以是以件、盒、托盘等为单位。 SPU(Standard Product Unit)：标准化产品单元。是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。 2. pms商品的数据结构的划分 1 sku的结构 pms_sku_ 2 spu的结构 pms_spu_ 3类目的结构 pms_catalog_ 4属性的结构
尚硅谷 谷粒学院 毕业设计 在线教育 部署文档
魏振东
08-22 2510
尚硅谷 谷粒学院 毕业设计 在线教育 部署文档
谷粒学院项目的数据库文件
10-31
【标题】"谷粒学院项目的数据库文件"涵盖了与谷粒学院相关的数据库设计和管理方面的知识。谷粒学院可能是一个在线教育平台，其数据库是存储用户信息、课程资料、学习进度等核心数据的关键部分。数据库文件通常包含...
谷粒学院相关项目资料
04-21
包含1 测试视频 2 代码生成器 3 前端相关资源 4 数据库脚本 5 docker脚本五个内容
guli-front:谷粒学院客户端
03-13
古里锋构建设置# install dependencies$ npm install# serve with hot reload at localhost:3000$ npm run dev# build for production and launch server$ npm run build$ npm run start# generate static project$ ...
谷粒学院项目笔记(内含详细配置讲解与部分源码)
04-25
【标题】：“谷粒学院项目笔记(内含详细配置讲解与部分源码)” 这篇笔记是谷粒学院针对一个具体项目的学习记录，其中包含了丰富的配置信息详解和部分源码分析，旨在帮助学习者深入理解项目的构建、运行以及关键功能...
kafka视频（谷粒学院）
09-07
kafka简介，kafka部署、配置，工作流程分析，实战演练。kafka简介，kafka部署、配置，工作流程分析，实战演练。kafka简介，kafka部署、配置，工作流程分析，实战演练。kafka简介，kafka部署、配置，工作流程分析，...
Java学习资源和毕业设计.txt
03-31
Java学习资源和毕业设计，谷粒商城，谷粒学院，微服务架构项目课程
谷粒学院项目总结
qq_50876039的博客
12-04 4860
谷粒学院在线教育系统项目总结 本项目是基于B2C的商业模式，微服务的架构。采用前后端分离开发的设计思想。前端主要使用了Vue、element-ui、Nust、echarts等技术，后端主要使用了SpringBoot（快速构建Spring项目的脚手架）、SpringCloud（Nacos注册中心、 feign注册与发现、Hystrix断路器、Gateway网关）、mybatisPlus、EasyExcel、阿里云OSS的视频点播与短信服务、Redis、HttpClient、Docker+Jenkins等技术，
【数据库】数据库设计规约
qq_43654226的博客
07-20 291
参考《阿里巴巴Java开发手册》 库名与应用名称尽量一致 表名、字段名必须使用小写字母或数字，禁止出现数字开头 表名不使用复数名词 表的命名最好是加上“业务名称_表的作用”。如，edu_teacher 表必备三字段：id, gmt_create, gmt_modified 说明：其中 id 必为主键，类型为 bigint unsigned、单表时自增、步长为 1。（如果使用分库分表集群部署，则id类型为verchar，非自增，业务中使用分布式id生成器） gmt_create, gmt_modified
毕设谷粒学院关于“createTime”报错
weixin_44395004的博客
12-09 1273
问题描述： 最近咋谷粒学院学习在线商城系统，学到mybatis-plus时自动注入遇到了问题， 报错信息如下： org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException: Error updating database. Cause: java.lang.IllegalStateException: Type handler was nul
谷粒学苑项目问题解决
闲时不练功，忙时一场空
03-30 3553
跨域问题 Access to XMLHttpRequest at ‘http://localhost:9001/eduservice/user/login’ from origin ‘http://localhost:9528’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is
谷粒学院 新版vue tinymce
09-05
谷粒学院新版的 Vue Tinymce 是一个基于 Vue.js 和 Tinymce 富文本编辑器的组件库。它提供了一些方便的功能和组件，可以帮助开发者在 Vue 项目中更方便地使用 Tinymce 编辑器。 Vue Tinymce 提供了一个名为 VueTinymce 的组件，可以直接在 Vue 的模板中使用。你可以像使用其他 Vue 组件一样，在模板中引入 VueTinymce，然后通过 v-model 进行双向绑定，实现内容的编辑和获取。 除了基础的编辑功能，Vue Tinymce 还支持一些高级功能，如自定义工具栏按钮、插入图片、插入链接等。你可以根据自己的需求，通过配置参数来定制编辑器的功能和样式。 要使用谷粒学院新版的 Vue Tinymce，你可以在项目中安装相关的依赖，然后按照文档进行配置和使用。具体的安装和使用方法可以参考谷粒学院的官方文档或相关教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值