JS使用正则从文本中提取所有的url

发表于 2021-08-18

需求

有一段文本如下:

我是文本
![](https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Ftranslate%2F620%2Fw910h510%2F20180429%2FfvFl-fzrwiaz1256884.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1631068659&t=f21770640c21b19d6236c33ac13f77c3)

[点击下载](http:it.newban.cn)

![](https://gitee.com/songjianzaina/SavePicGoPic/raw/master/img/20210106181201.png)

需要将里面所有的非图片url提取出来并替换

实现

url提取代码如下:

 let allReg = new RegExp("[^!]\\[.*\\]\\((http.+)\\)", "g");

   let result;
  let allArr = [];
  while ((result = urlReg.exec(data)) != null) {
    getShortUrl(result[1], (value) => {
   
      allArr.push(value)
    });
  }
// allArr里面装着所有匹配到的url

url替换;

//比如将所有的链接替换成A
allArr.forEach(e=>{
  data.replace(e,"A")
})

RegExp对象介绍

let reg=new RegExp("[^!]\\[.*\\]\\((http.+)\\)","g")

//或者简写成
let reg=/[^!]\\[.*\\]\\((http.+)\\)/g;

参数:

第一个参数填入正则表达式, 第二个参数填入正则修饰符,其中g表示全局匹配

正则表达式修饰符:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

常用方法:

使用String对象的match方法匹配多个:

1 2	let arr=data.match(reg); //返回一个装有匹配到内容的数组

exec方法用于匹配单个:

1
2
3

let reg=new RegExp("[^!]\\[.*\\]\\((http.+)\\)")
let element=reg.exec("http:xxxxx")
//返回第一个匹配到的内容

在不加第二个参数g的前提下, 重复执行exec方法, 始终返回第一个

如果加了g ,重复执行相当于遍历, 如下:

let reg=new RegExp("[^!]\\[.*\\]\\((http.+)\\)","g")
let element=reg.exec("http:xxxxx")
//返回第一个
let element2=reg.exec("http:xxxxx")
//返回第二个

test方法, 检查是否有符合匹配的存在:

1 2	let reg=new RegExp("[^!]\\[.*\\]\\((http.+)\\)","g") let isHas=reg.test("http:xxx")//如果匹配上了返回ture 否则false

String对象的search方法也可以检查是否有符合匹配的存在:

1 2	let index=data.search(reg); //index为-1表示没有匹配上否则匹配成功

示例

从url中提取子域名

1 2	var url = "http://xxx.domain.com"; console.log(/[^.]+/.exec(url)[0].substr(7)); // logs "xxx"

从一个单词中分离出Unicode 字符

let text = "Образец text на русском языке";
let regex = /[\u0400-\u04FF]+/g;

let match = regex.exec(text);
console.log(match[1]);  // prints "Образец"

let match2 = regex.exec(text);
console.log(match2[1]);  // prints "на" [did not print "text"]

使用前建议使用正则表达式测试工具验证正则表达式是否可行

本文为作者原创转载时请注明出处谢谢

B站入口

打赏通道

微信公众号二维码如下:

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

原生JS中判断数组中是否包含某个元素的若干种方法

发表于 2021-08-18

第一种使用`indexOf`方法

var arr = ["A", "B", "C", "D"];

var index = arr.indexOf("A");
//如果返回-1 则表示不存在

第二种使用`find`方法

var arr = ["A", "B", "C", "D"];

var element = arr.find(function(value){
	return value == "A";
});
//如果没有找到返回undefined 否则返回符合条件的元素

第三种使用`findIndex`方法

和find方法类似, 只不过返回值不一样

var arr = ["A", "B", "C", "D"];

var index = arr.find(function(value){
	return value == "A";
});
//如果没有找到返回-1 否则返回符合条件元素的角标

第四种使用`for`循环

var arr = ["A", "B", "C", "D"];

arr.forEach(e=>{
  	if(e=="A"){
      //找到元素
    }
})

第五种使用`includes`方法

var arr = ["A", "B", "C", "D"];

arr.includes("A");
//返回true表示存在 否则返回false

第六种使用`some`方法

var arr = ["A", "B", "C", "D"];

var index = arr.some(function(value){
	return value == "A";
});
//返回true表示存在 否则返回false

第七中使用`filter`方法

var arr = ["A", "B", "C", "D"];

var newArr = arr.filter(function(value){
	return value == "A";
});
//返回一个新数组, 如果新数组有数据 表示存在

第八中自定义扩展方法

1
2
3

Array.prototype.has = function ( target) {
  return this.includes(target);
};

本文为作者原创转载时请注明出处谢谢

B站入口

打赏通道

微信公众号二维码如下:

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Android开发中实现全局数据共享的几种方式

发表于 2021-08-17

前言

这里的数据并不是指单纯的字面值数据, 字面值数据我们可以使用数据库实现, 但是如果我们需要将一些变量, 对象设置成全局共享那么有以下几种方式

静态变量/常量
单例
枚举
后台服务

静态变量/常量

既可以存储字面值数据, 也可以存储引用型数据

单例

全局唯一的对象实例, 这个不必多说

枚举

由静态常量/变量延伸而来, jdk早期版本不支持枚举, 都是使用静态常量替代

枚举使用相对静态常量更加方便

后台服务

属于Android独有, 四大组件之一, 可以利用service维护一个全局唯一对象或者变量

由于Service自带Context对象, 因此在需要使用到Context的场景下推荐使用Service来实现全局数据共享, 避免内存泄露

本文为作者原创转载时请注明出处谢谢

B站入口

打赏通道

微信公众号二维码如下:

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Web中关于转发和重定向的区别

发表于 2021-08-16

服务端内部页面的跳转, 只作用于服务器内部, 和浏览器无关

在这里插入图片描述

特点:

地址栏不发生变化，显示的是上一个页面的地址
请求次数：只有1次请求
请求域中数据不会丢失

关键方法:

1	request.getRequestDispatcher("/jump_ad").forward(request, response)

示例:


@CrossOrigin
@RestController
class JumpControllor {

    @Autowired
    lateinit var shortService: ShortKeyService


    @GetMapping("/test")
    fun test(
        response: HttpServletResponse,
        request: HttpServletRequest
    ) {
                request.getRequestDispatcher("/jump_ad").forward(request, response)
        }

    @GetMapping("/jump_ad")
    fun jumpAd(request: HttpServletRequest,response: HttpServletResponse) {
        response.writer.println("哈哈哈")

    }


}

浏览器端的页面跳转, 同时作用于浏览器和服务端

在这里插入图片描述

特点:

地址栏：显示新的地址
请求次数：2次
请求域中的数据会丢失，因为是2次请求

关键方法:

1	response.sendRedirect("新地址")

示例:

@CrossOrigin
@RestController
class JumpControllor {

    @Autowired
    lateinit var shortService: ShortKeyService


    @GetMapping("/test")
    fun test(
        response: HttpServletResponse,
        request: HttpServletRequest
    ) {
        response.sendRedirect("http://www.baidu.com")
        }


}

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Javascript中click点击事件的若干种种写法

发表于 2021-08-16

第一种

<!DOCTYPE html>
<html>
<head>
    <title>Javascript中点击事件方法一</title>
</head>
<body>
    <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.onclick=function(){
            alert("hello world");
        }
    </script>
</body>
</html>

移除事件:

1	btn.onclick=null;

第二种

<!DOCTYPE html>
<html>
<head>
    <title>Javascript中点击事件方法二</title>
</head>
<body>
    <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.addEventListener('click',function(){
            alert("hello wrold");
        },false)
    </script>
</body>
</html>

第三种

<!DOCTYPE html>
<html>
<head>
    <title>Javascript中点击事件方法三</title>
    <script type="text/javascript">
        function test(){
            alert("hello world");
        }
    </script>
</head>
<body>
    <button id="btn" onclick="test()">click</button>
</body>
</html>

第四种

模拟触发事件:

<html> 
  <head> 
    <title>usually function</title> 
  </head> 
  <script> 
function load(){ 
  //下面两种方法效果是一样的 
 document.getElementById("target").onclick(); 
  document.getElementById("target").click(); 
} 
function test(){ 
  alert("test"); 
} 
</script> 
  <body onload="load()"> 
    <button id="target" onclick="test()">test</button> 
  </body> 
<html>

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

数据库操作之多表联合查询sql语句

发表于 2021-08-12

表准备

假设数据库有两张表名为person和city

表person字段如下:

id	name	c_id
1	张三	1
2	李四	2
3	王五	5

表city字段如下

id	city
1	北京
2	上海
3	广州

多表合一查询

第一种

1	select xxx,xxx from 表1，表2 where 表1.xxx=表2.xxx

示例:

1	select name, city from person, city where name.c_id = city.id;

查询结果:

city	name
北京	张三
上海	李四

第二种使用 join

1	select xxx,xxx from 表1 inner join 表2 on 表1.xxx=表2.xxx

示例:

1	select name, city from person inner join city on name.c_id = city.id;

查询结果和第一种一致

根据一张表字段查询另外一张表

查询所属北京的都有哪些人

# 嵌套查询方式
select name
from person 
where c_id = ( select id  from city  where city = '北京')

#或者非嵌套查询方式
select name
from person p, city c
where p.c_id = c.id and c.city= '北京'

like关键字查询姓张的有多少人

1
2
3

select count(distinct(name)) 
  from person
  where name like '张%';

in嵌套查询判断查询的表达式是否在多个值的列表中

1
2
3

select name 
from person 
where c_id in ( select id from city);

some部分匹配查询如果在一系列比较中，有些值为True，那么结果就为True

1
2
3

select name 
from person 
where c_id = some ( select id from city);

all全部匹配查询如果一系列的比较都为true，那么结果才能为true

#大于以下返回的所有id，此结果才为True，此结果才返回
select name 
from person 
where c_id > all ( select id from city);

exists嵌套查询如果子查询有结果集返回，那么就为True 一旦找到第一个匹配的记录后，就马上停止查找

1
2
3

select * 
from person 
where exists ( select * from city);

子查询必定返回true的三种情况:

#第一种select 1
select * 
from person 
where exists ( select 1);

#第二种select 0
select * 
from person 
where exists ( select 0);

#第三种select null
select * 
from person 
where exists ( select null);

根据子查询结果充当临时表进行查询

子查询是一种嵌套查询，将一个查询用小括号包围起来，然后作为下一个查询的结果，子查询必须有别名 ,一般用于二次或多次筛查。

1	SELECT nan.id FROM (SELECT name,c_id FROM person WHERE id=2) AS nan WHERE c_id = 1;

关于`join`的特殊用法

JOIN: 如果表中有至少一个匹配，则返回行
LEFT JOIN: 即使右表中没有匹配，也从左表返回所有的行
RIGHT JOIN: 即使左表中没有匹配，也从右表返回所有的行
FULL JOIN: 只要其中一个表中存在匹配，就返回行

LEFT JOIN示例:

1	select name, city from person left join city on name.c_id = city.id;

返回结果:

city	name
北京	张三
上海	李四
	王五

RIGHT JOIN示例:

1	select name, city from person right join city on name.c_id = city.id;

返回结果:

city	name
北京	张三
上海	李四
广州

FULL JOIN示例:

1	select name, city from person full join city on name.c_id = city.id;

返回结果:

city	name
北京	张三
上海	李四
广州
	王五

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

springboot整合mybatis访问mysql数据库

发表于 2021-08-12

环境

构建工具:Gradle
开发语言:Kotlin
mysql版本: 8.0

配置步骤

1.引入依赖

在build,gradle文件引入mybatis-spring-boot-starter-web的依赖：

1	implementation "org.springframework.boot:spring-boot-starter-web:2.4.9"

引入数据库连接依赖：

1	implementation "mysql:mysql-connector-java:8.0.26"

2.引入数据源

application.yml配置文件中引入数据源：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?characterEncoding=utf-8&useSSL=false
    username: root
    password: 123456
    driver: com.mysql.cj.jdbc.Driver

这样，springboot就可以访问数据了。

3.创建数据库表

建表语句：

-- create table `account`
# DROP TABLE `account` IF EXISTS
CREATE TABLE `account` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `money` double DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
INSERT INTO `account` VALUES ('1', 'aaa', '1000');
INSERT INTO `account` VALUES ('2', 'bbb', '1000');
INSERT INTO `account` VALUES ('3', 'ccc', '1000');

4.具体实现

这篇文篇通过注解的形式实现。

5.创建实体：

data class Account (
    var id:Int = 0,
    var name: String? = null,
    var money :Double= 0.0
)

6.Dao层

@Mapperpublic interface AccountMapper {

    @Insert("insert into account(name, money) values(#{name}, #{money})")
    int add(@Param("name") String name, @Param("money") double money);

    @Update("update account set name = #{name}, money = #{money} where id = #{id}")
    int update(@Param("name") String name, @Param("money") double money, @Param("id") int  id);

    @Delete("delete from account where id = #{id}")
    int delete(int id);

    @Select("select id, name as name, money as money from account where id = #{id}")
    Account findAccount(@Param("id") int id);

    @Select("select id, name as name, money as money from account")
    List<Account> findAccountList();}

7.service层

@Mapper
interface AccountMapper {
    @Insert("insert into account(name, money) values(#{name}, #{money})")
    fun add(@Param("name") name: String?, @Param("money") money: Double): Int

    @Update("update account set name = #{name}, money = #{money} where id = #{id}")
    fun update(
        @Param("name") name: String?,
        @Param("money") money: Double,
        @Param("id") id: Int
    ): Int

    @Delete("delete from account where id = #{id}")
    fun delete(id: Int): Int

    @Select("select id, name as name, money as money from account where id = #{id}")
    fun findAccount(@Param("id") id: Int): Account?

    @Select("select id, name as name, money as money from account")
    fun findAccountList(): List<Account?>?
}

8.controller层，构建restful API


@CrossOrigin
@RestController
class MainControl {
    

    @Autowired
    lateinit var accountService: AccountService


    @GetMapping(value = ["/list"])
    fun getAccounts(): List<Account> {
        return accountService.findAccountList()
    }

    @GetMapping(value = ["/{id}"])
    fun getAccountById(@PathVariable("id") id: Int): Account? {
        return accountService.findAccount(id)
    }

    @PutMapping(value = ["/{id}"])
    fun updateAccount(
        @PathVariable("id") id: Int, @RequestParam(value = "name", required = true) name: String?,
        @RequestParam(value = "money", required = true) money: Double
    ): String {
        val t = accountService.update(name, money, id)
        return if (t == 1) {
            "success"
        } else {
            "fail"
        }
    }

    @DeleteMapping(value = ["/{id}"])
    fun delete(@PathVariable(value = "id") id: Int): String {
        val t = accountService.delete(id)
        return if (t == 1) {
            "success"
        } else {
            "fail"
        }
    }
}

配置完毕

最后启动程序, 浏览器访问:http://localhost:8080/list进行测试

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

SQL修改字段属性

发表于 2021-08-11

1.增加字段

1
2

ALTER TABLE tableName ADD COLUMN columnName VARCHAR(20) DEFAULT NULL --增加一个字段，默认为空
ALTER TABLE tableName ADD COLUMN columnName VARCHAR(20) NOT NULL     --增加一个字段，默认不能为空

2.删除字段

1	ALTER TABLE tableName DROP COLUMN columnName --删除一个字段

3.修改字段类型

1	ALTER TABLE tableName MODIFY COLUMN columnName VARCHAR(10) --修改一个字段的类型

4.删除主键

Declare @Pk varChar(100);
Select @Pk=Name from sysobjects where Parent_Obj=OBJECT_ID('tableName') and xtype='PK';
if @Pk is not null
exec('Alter table tableName Drop '+ @Pk)

5.给已经建好的表字段添加唯一性约束

1	alter table 表名 add unique(字段名);

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Android开发者快速上手Web前端开发

发表于 2021-08-06

前言

我们都知道Web前端主要由HTML CSS 和JS三部分语言组成, 其中HTML和CSS负责界面, JS负责事件逻辑

任何一个应用, 无非就是界面和事件两大块组成, 本文主要介绍如何快速上手界面的编写

控件对比

Android应用界面的编写主要通过控件的排列组合, 常用的控件有TextView, EditText, ImageView, 那么在Web前端中也有类似于Android中的控件,只不过在前端中不叫控件, 而叫标签, 部分对比如下:

Html标签	Android控件
img标签	ImageView
input标签和textarea标签	EditText
button标签	Button
h系列标签,p标签,span标签	类似于TextView
div标签	类似于水平方向的LinearLayout

容器标签和文本标签以及叶子标签的区别:

容器标签: 里面可以嵌套其他标签, 比如div标签
文本标签: 里面可以填充文本显示, 比如p标签
叶子标签:里面既不可以嵌套标签也不可以嵌套文本, 比如img标签

当然, 有些标签既是容器标签又是文本标签:

标签	容器标签	文本标签	叶子标签
div	√	√	×
p	×	√	×
span	√	√	×
h系列	√	√	×
button	√	√	x
img	×	×	√
audio	×	×	√
video	×	×	√

除此之外, 有的标签本身自带换行符:

标签	开头自带换行符	结尾自带换行符
div	√	√
h系列	√	√
button	x	x
p	√	×
ul	√	√
span	×	×
img	×	×
audio	×	×
video	×	×

关于控件的宽高显示:

样式属性	Android宽高属性
display:block	android:layout_width=”match_parent”
display:inline	android:layout_width=”wrap_content” android:layout_height=”wrap_content”
display:inline-block	android:layout_width=”自定义” android:layout_height=”自定义”

关于元素的位置定位:

标签	Android控件
position:absolute 元素的位置以浏览器窗口为参照摆放	相当于设置成为Framelayout的子控件
position:relative 元素位置以邻近元素为参照摆放	相当于设置成为LinearLayout的子控件
position:fixed 元素的位置以浏览器窗口为参照摆放, 但是不随滚动条移动	相当于在ScrollView上层增加一个固定控件
position: sticky 粘性定位, 元素滚动超出页面时切换为fixed模式	和Android中粘性控件一样
position: static 默认状态,此时top left right bottom等属性均无效

也就是说, top left right bottom这几个属性需要和position配合使用

关于自定义控件(标签)

在Android中除了官方提供的原生控件外, 我们还可以自定义控件, 那么Web前端可以吗?

如果放在以前肯定不行, 只能使用官方提供的html标签, 现在nodejs环境下可以实现自定义标签, 比如vue中:

在Android中我们可以对控件设置相应的属性, 并且把共同的属性抽取到style文件中

那么Web前端也一样, 只不过属性和样式分开处理,抽取出来样式放置在style标签下, 如果单独放到一个文件中, 那么这个文件的后缀必须为.css, 所以我们又称之为CSS样式表或者CSS语言

事实上, 我们会发现, Android的界面编写方式很多都是参考的Web前端

小练习:

写一个左侧带图标的文本:

只要一个img标签和一个span标签够了:

1	<img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>

效果如下:

成墨文档

接下来需要给内容增加一个超链接, 所以在最外层包裹一个a标签

1	<a><img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span></a>

效果如下:

成墨文档

考虑到这个内容属于网站的网站标题, 为了利于seo 因此最外层再包裹一个h1标签, 此时文本也变大

<h1>
  <a class="navbar-brand" href="/web/homepage/index">
  <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>
  </a>
  </h1>

效果如下:

成墨文档

写一个网站导航条:

html代码如下:

<div  id="navbar">
   
   <h1>
    <a class="navbar-brand" href="/web/homepage/index">
    <img style="max-width: 26px; max-height: 26px" src="./assets/logo.png"> <span>成墨文档</span>
    </a>
    </h1>
      
        <ul >
<li><a href="/web/homepage/index">首页</a></li>
<li><a target="_blank" href="https://www.xxx.com/pricing">价格</a></li>
<li><a href="http://blog.xxx.com/">博客</a></li>
<li><a href="https://docs.xxx.com/#/">帮助文档</a></li>
<li><a href="/web/homepage/apidoc">API</a></li>
<li class="long-li nav-item"><a href="/web/signup/sign_up" id="btn-register">免费注册</a></li>
<li class="short-li nav-item"><a href="/web/login">登录</a></li>
</ul>
</div>

效果如下:

成墨文档

<ul >
   <li><a href="/web/homepage/index">首页</a></li>
<li><a target="_blank" href="https://www.xxx.com/pricing">价格</a></li>
<li><a href="http://blog.xxx.com/">博客</a></li>
<li><a href="https://docs.xxx.com/#/">帮助文档</a></li>
<li><a href="/web/homepage/apidoc">API</a></li>
<li class="long-li nav-item"><a href="/web/signup/sign_up" id="btn-register">免费注册</a></li>
<li class="short-li nav-item"><a href="/web/login">登录</a></li>
</ul>

我们需要给其添加相应的样式:

<style >
   #navbar{
 /*固定在顶部*/
   position: fixed;
   top:0px;
   left:0px;
   width:100%;
   height:64px;
   background-color:#AAAAAA;
   padding-left:50px;
   padding-right:20px;
   display:flex;
       align-items:center;/*指定垂直居中*/
   }
ul{

  display: inline-block;
     /*列表向右浮动*/
			float: right;
}
h1{
  display:inline;
}
li{
  /*去除列表中的原点样式*/
  list-style: none; 
  
 
   /*列表从左向右浮动*/
			float: left;
    margin-left: 40px;
} 

a{
  /*取消超链接下划线*/	
  text-decoration: none;

}
</style>

以上是比较基础的练习, 熟悉的差不多了后, 我们开始进入到使用vue的开发阶段

Vue快速上手

环境配置:

vue项目创建:

第一步安装vue:

1	npm install -g @vue/cli-service-global

第二步创建脚手架(模板工程)

vue create hello-world

#或者直接使用图形化界面创建
vue ui

这里直接使用图形化创建:

创建后自动生成相应的文件和目录, 目录结构如下:

大部分和原生相比差别不大, 但是开发上更加高效,具体参考:

Vue入门基础语法

为什么选择vue

vue只是一个开发框架或者理解为一个中间人, 它借助于nodejs环境, 使得我们可以采用MVVM的模型, 同时集成第三方各种插件, 方便而又快速地组件化开发, 相比原生而言整体的架构也更加清晰, 后期维护也得心应手

当然, 你也可以使用其他前端框架, 比如Facebook的React框架, 或者Google推出的Angular框架, 未来也可能出现新的框架, 但有一点是不会变的, 不管是什么框架, 它编译出来最终文件还是html css和js, 因为目前浏览器只识别这三种文件

本文为作者原创转载时请注明出处谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

Vue的组件为什么要export default

发表于 2021-08-05

Vue 的模块机制

　　Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块，例如：

　　此外，你还可以在 bulid/webpack.base.conf.js文件中修改相关配置：

　　意思是，你的模块可以省略 ".js"，".vue"，“.json”后缀，webpack 会在之后自动添加上；可以用 "@"符号代替 "src"字符串等。

　　export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

　　export和export default的区别在于：export可以导出多个命名模块，例如：

//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}

　　对应的引入方式：

1 2	//demo2.js import { str, f } from 'demo1'

　　export default只能导出一个默认模块，这个模块可以匿名，例如：

//demo1.js
export default {
    a: 'hello',
    b: 'world'      
}

　　对应的引入方式：

1 2	//demo2.js import obj from 'demo1'

　　引入的时候可以给这个模块取任意名字，例如 "obj"，且不需要用大括号括起来。

本文转载自:https://www.cnblogs.com/blog-cxj2017522/p/8562536.html

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

需求

实现

RegExp对象介绍

参数:

正则表达式修饰符:

常用方法:

示例

第一种 使用indexOf方法

第二种 使用find方法

第三种 使用findIndex方法

第四种 使用for循环

第五种 使用includes方法

第六种 使用some方法

第七中 使用filter方法

第八中 自定义扩展方法

前言

静态变量/常量

单例

枚举

后台服务

转发

转发

第一种

第二种

第三种

第四种

表准备

多表合一查询

根据一张表字段查询另外一张表

根据子查询结果充当临时表进行查询

关于join的特殊用法

环境

配置步骤

1.引入依赖

2.引入数据源

3.创建数据库表

4.具体实现

5.创建实体：

6.Dao层

7.service层

8.controller层，构建restful API

前言

控件对比

Vue快速上手

为什么选择vue

Vue 的模块机制

第一种使用`indexOf`方法

第二种使用`find`方法

第三种使用`findIndex`方法

第四种使用`for`循环

第五种使用`includes`方法

第六种使用`some`方法

第七中使用`filter`方法

第八中自定义扩展方法

关于`join`的特殊用法