环境搭建

篇幅较长，请配合目录观看
项目准备
1. 前端准备

1.1 修改HBuilder的模拟器端口为62001（夜神模拟器的端口）
1.2 打开夜神模拟器运行设备
1.3 HBuilder新建项目
1.4 导入静态资源
1.5 修改默认访问页面
1.6 新建welcome.html
1.7 新建login.html
1.8 新建register.html
1.9 点击夜深模拟器的HBuilder
1.10 流程

2. 后端准备

2.1 新建站点工程weixin
2.2 weixin新建项目weixin-web（module-maven）
2.3 wx-web新建项目weixin-eureka（module-springboot）

2.3.1 导包
2.3.2 编写bootstrap.yml
2.3.3 程序入口添加注解

2.4 wx-web新建项目weixin-config-server（module-springboot）

2.4.1 导包
2.4.2 编写application.yml
2.4.3 新建resources/config编写application-eureka.yml
2.4.4 程序入口添加注解

2.5 启动2个程序入口测试

中国加油，武汉加油！

篇幅较长，请配合目录观看

项目准备

HBuilderX
夜神模拟器（也可以用别的模拟器）
idea

1. 前端准备

1.1 修改HBuilder的模拟器端口为62001（夜神模拟器的端口）

在这里插入图片描述

1.2 打开夜神模拟器运行设备

在这里插入图片描述

1.3 HBuilder新建项目

在这里插入图片描述

1.4 导入静态资源

1.5 修改默认访问页面

在这里插入图片描述

1.6 新建welcome.html

在这里插入图片描述

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			// 类似jquery的$(function(){})
			mui.plusReady(function () {
			    setTimeout(function(){
					// 获取当前页面
					var cpage = plus.webview.currentWebview();
					// 跳转到登录页面
					plus.webview.open("login.html","login.html");
					// 关闭页面
					cpage.close();
				}, 2000);
			})
		</script>
	</head>
	<body>
		<img src="image/welcomebg.jpg" style="width: 100%;"/>
	</body>
</html>

1.7 新建login.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/myimg.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function () {
				// tap:触屏事件
				document.getElementById("newuser_but").addEventListener("tap",function(){
					// 打开注册页面
					plus.webview.open("register.html","register.html");
				});
			})
		</script>
	</head>
	<body style="text-align: center;">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div style="margin-top: 150px;">
			<img src="image/header.jpg" style="width: 150px;" class="cimg" />
			<form class="mui-input-group" style="">
				<div class="mui-input-row">
					<label>用户名</label>
				<input type="text" id="username"  value="admin" class="mui-input-clear" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" id="password" value="admin" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-button-row">
					<button type="button"  id="login_but" class="mui-btn mui-btn-success" style="width: 80%;">登录</button>
				</div>
			</form>
			<a id="newuser_but">新用户</a> <a>忘记密码</a>
		</div>
	</body>
</html>

1.8 新建register.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function () {
			    document.getElementById("register_but").addEventListener("tap",function(){
					// 先获取表单数据
					var username = document.getElementById("username").value;
					var password = document.getElementById("password").value;
					var phone = document.getElementById("phone").value;
					var nickname = document.getElementById("nickname").value;
					// 封装对象
					var param = new Object();
					param.username = username;
					param.password = password;
					param.phone = phone;
					param.nickname = nickname;
					// 发送请求
					console.info(JSON.stringify(param))
				})
			})
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新用户</h1>
		</header>
		<div style="margin-top: 50px;">
			<form class="mui-input-group" style="">
				<div class="mui-input-row">
					<label>昵称</label>
					<input type="text" id="nickname" class="mui-input-clear" value="jieKaMi" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>用户名</label>
				<input type="text" id="username" class="mui-input-clear" value="wupeijie" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" id="password" value="123456" class="mui-input-password" placeholder="请输入密码">
				</div>
				<div class="mui-input-row">
					<label>手机号</label>
					<input type="text" class="mui-input-clear" id="phone" value="15875" placeholder="请输入用户名">
				</div>
				<div class="mui-button-row">
					<button type="button" id="register_but" class="mui-btn mui-btn-success" style="width: 80%;">注册</button>
				</div>
			</form>
		</div>
	</body>
</html>

1.9 点击夜深模拟器的HBuilder

在这里插入图片描述

1.10 流程

进入微信的welcome页面，2秒后跳转到登录页面。
点击登录页面的新用户按钮，跳转到注册页面。

2. 后端准备

2.1 新建站点工程weixin

删除src

2.2 weixin新建项目weixin-web（module-maven）

删除src

2.3 wx-web新建项目weixin-eureka（module-springboot）

2.3.1 导包

<dependency>
   <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-config-client</artifactId>
</dependency>

2.3.2 编写bootstrap.yml

spring:
  cloud:
    config:
      uri: http://localhost:8081
      name: application
      profile: eureka

2.3.3 程序入口添加注解

package com.wpj;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.netflix.eureka.server.EnableEurekaServer;

@EnableEurekaServer
@SpringBootApplication
public class WeixinEurekaApplication {
    public static void main(String[] args) {
        SpringApplication.run(WeixinEurekaApplication.class, args);
    }
}

2.4 wx-web新建项目weixin-config-server（module-springboot）

2.4.1 导包

<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-config-server</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.cloud</groupId>
    <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
</dependency>

2.4.2 编写application.yml

server:
  port: 8081
spring:
  cloud:
    config:
      server:
        native:
          search-locations: classpath:/config
  profiles:
    active: native

2.4.3 新建resources/config编写application-eureka.yml

spring:
  application:
    name: weixin-eureka
eureka:
  client:
    service-url:
      defaultZone: http://localhost:8080/eureka
    fetch-registry: false
    register-with-eureka: false

2.4.4 程序入口添加注解

package com.wpj;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.cloud.config.server.EnableConfigServer;

@SpringBootApplication
@EnableConfigServer
public class WeixinConfigServerApplication {
    public static void main(String[] args) {
        SpringApplication.run(WeixinConfigServerApplication.class, args);
    }
}

2.5 启动2个程序入口测试

访问 http://localhost:8081/application-eureka.yml
再访问 http://localhost:8080/

杰KaMi

发布了126 篇原创文章 · 获赞 18 · 访问量 1万+

私信关注

springcloud篇】九. springcloud项目一环境搭建

环境搭建

篇幅较长，请配合目录观看

项目准备

1. 前端准备

1.1 修改HBuilder的模拟器端口为62001（夜神模拟器的端口）

1.2 打开夜神模拟器运行设备

1.3 HBuilder新建项目

1.4 导入静态资源

1.5 修改默认访问页面

1.6 新建welcome.html

1.7 新建login.html

1.8 新建register.html

1.9 点击夜深模拟器的HBuilder

1.10 流程

2. 后端准备

2.1 新建站点工程weixin

2.2 weixin新建项目weixin-web（module-maven）

2.3 wx-web新建项目weixin-eureka（module-springboot）

2.3.1 导包

2.3.2 编写bootstrap.yml

2.3.3 程序入口添加注解

2.4 wx-web新建项目weixin-config-server（module-springboot）

2.4.1 导包

2.4.2 编写application.yml

2.4.3 新建resources/config编写application-eureka.yml

2.4.4 程序入口添加注解

2.5 启动2个程序入口测试

猜你喜欢

springcloud篇】九. springcloud项目 一 环境搭建

环境搭建

篇幅较长，请配合目录观看

项目准备

1. 前端准备

1.1 修改HBuilder的模拟器端口为62001（夜神模拟器的端口）

1.2 打开夜神模拟器运行设备

1.3 HBuilder新建项目

1.4 导入静态资源

1.5 修改默认访问页面

1.6 新建welcome.html

1.7 新建login.html

1.8 新建register.html

1.9 点击夜深模拟器的HBuilder

1.10 流程

2. 后端准备

2.1 新建站点工程weixin

2.2 weixin新建项目weixin-web（module-maven）

2.3 wx-web新建项目weixin-eureka（module-springboot）

2.3.1 导包

2.3.2 编写bootstrap.yml

2.3.3 程序入口添加注解

2.4 wx-web新建项目weixin-config-server（module-springboot）

2.4.1 导包

2.4.2 编写application.yml

2.4.3 新建resources/config编写application-eureka.yml

2.4.4 程序入口添加注解

2.5 启动2个程序入口测试

猜你喜欢

springcloud篇】九. springcloud项目一环境搭建