litesky
litesky

Flutter漂亮UI（Flutter-Auth）

image

原项目可以在https://github.com/abuanwar072/Welcome-Login-Signup-Page-Flutter找到，官方录制了相应的视频在https://www.youtube.com/watch?v=ExKYjqgswJg&feature=youtu.be上，基于此编写学习的过程，本项目地址https://github.com/tianrandailove/flutter_auth。

实现欢迎页

  1. 首先定义主题的颜色，我们在lib目录下创建constant目录，并创建color_constant.dart 文件。
import 'package:flutter/material.dart';

const kPrimaryColor = Color(0xFF6F35A5); //深色
const kPrimaryLightColor = Color(0xFFF1E6FF); //浅色
  1. 准备资源文件，在根目录下创建assets文件，并将资源拷贝到这里，并编辑pubspec.yaml文件配置资源文件的引用。
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/
    - assets/icons/
  1. 需要使用flutter_svg渲染svg资源，编辑pubspec.yaml文件，引入flutter_svg包。
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3
  flutter_svg: ^0.17.4

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
  1. 执行 pub get 命令。
  2. 在lib目录下创建pages/welcome目录。
  3. 先看下welcome页面的构成，整个页面由背景层和前景层组成，因此整个界面使用stack布局，使用Positioned配合布局背景层，column布局前景层。在pages/welcome目录下创建components目录（存放背景层和前景层）。
  4. 在components目录下创建background.dart 文件，该文件用于渲染welcome页面背景。
import 'package:flutter/material.dart';

class Background extends StatelessWidget{
  final Widget child;

  const Background({Key key,@required this.child}):super(key:key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      width: double.infinity,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset("assets/images/main_top.png",
            width: size.width*0.3,),
          ),
          Positioned(
            bottom: 0,
              left: 0,
            child: Image.asset("assets/images/main_bottom.png",
            width: size.width*0.2,),
          )
          ,
          child,
        ],
      ),
    );
  }

}
  1. 修改main.dart文件，删除其他代码，只保留 main函数和MyApp类的代码，并替换home节点的内容
import 'package:flutter/material.dart';
import 'package:flutterauth/pages/welcome/components/background.dart';
import 'package:flutterauth/pages/welcome/welcome.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Auth',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        body: Background(
          child: Center(
            child: Text('WELCOME'),
          ),
        ),
      ),
    );
  }
}
  1. 运行App，如下：
image
  1. 在lib目录下创建widgets目录，在widgets目录下创建rounded_button.dart文件，这里实现一个圆角按钮，内容如下。
import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press;
  final Color color, textColor;

  const RoundedButton(
      {Key key,
      this.text,
      this.press,
      this.color = kPrimaryColor,
      this.textColor = Colors.white})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(
        vertical: 10,
      ),
      width: size.width * 0.8,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(29),
        child: FlatButton(
          padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
          color: color,
          onPressed: press,
          child: Text(
            text,
            style: TextStyle(color: textColor),
          ),
        ),
      ),
    );
  }
}
  1. 接下来在components目录下创建body.dart 文件，该文件用于渲染前景层。
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:flutterauth/constant/color_constant.dart';
import 'package:flutterauth/pages/login/login.dart';
import 'package:flutterauth/pages/signup/sign_up.dart';
import 'package:flutterauth/pages/welcome/components/background.dart';
import 'package:flutterauth/pages/widgets/rounded_button.dart';

class Body extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("WELCOME",
              style: TextStyle(fontWeight:FontWeight.bold),),
              SizedBox(height: size.height*0.05,),
              SvgPicture.asset("assets/icons/chat.svg",height: size.height*0.45,),
              SizedBox(height: size.height*0.05,),
              RoundedButton(
                text: "SIGN IN",
                press: (){
                },
              ),
              RoundedButton(
                text:"SIGN UP",
                color: kPrimaryLightColor,
                textColor: Colors.black,
                press:(){
                },
              )
            ],
          ),
        )
    );
  }
}
  1. 修改main.dart文件，将Background节点的child设置成刚刚创建Body实例。
home: Scaffold(
        body: Background(
          child:Body(),
        ),
      ),
  1. 运行App。
image.png
  1. 在welcome目录下创建welcome.dart文件，将整个welcome页面的渲染内容放到这个文件中。
import 'package:flutter/material.dart';
import 'package:flutterauth/pages/welcome/components/body.dart';

class Welcome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Body(),
    );
  }
}
  1. 修改main.dart文件的home节点为Welcome实例。
Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Auth',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Welcome(),
    );
  }

实现登录页

  1. 在pages目录下创建login目录，在login下创建components目录。
  2. 登录页面和欢迎页面一样，采用背景层和前景层的布局方式。
  3. 在components目录下创建background.dart文件实现背景层。
import 'package:flutter/material.dart';

class Background extends StatelessWidget {
  final Widget child; //前景层元素做为子元素
  const Background({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      width: double.infinity,
      height: size.height,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset(
              "assets/images/main_top.png",
              width: size.width * 0.35,
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Image.asset(
              "assets/images/login_bottom.png",
              width: size.width * 0.4,
            ),
          ),
          child,
        ],
      ),
    );
  }
}
  1. 在lib/widgets创建text_field_container.dart文件，实现一个文本框容器。
import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class TextFieldContainer extends StatelessWidget {
  final Widget child;

  const TextFieldContainer({Key key, @required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
      width: size.width * 0.8,
      decoration: BoxDecoration(
          color: kPrimaryLightColor, borderRadius: BorderRadius.circular(29)),
      child: child,
    );
  }
}
  1. 在lib/widgets下创建rounded_input_field.dart文件，实现一个自定义的文本输入框。
import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';
import 'package:flutterauth/pages/widgets/text_field_container.dart';

class RoundedInputField extends StatelessWidget {
  final String hintText;
  final IconData icon;
  final ValueChanged onChanged;

  const RoundedInputField({
    Key key,
    this.hintText,
    this.icon = Icons.person,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextField(
        onChanged: onChanged,
        cursorColor: kPrimaryColor,
        decoration: InputDecoration(
          icon: Icon(icon,color: kPrimaryColor,),
          hintText: hintText,
          border: InputBorder.none,
        ),
      ),
    );
  }
}
  1. 在lib/widgets下创建rounded_password_field.dart文件，实现一个人密码输入框。
import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';
import 'package:flutterauth/pages/widgets/text_field_container.dart';

class RoundedPasswordField extends StatelessWidget {
  final ValueChanged onChanged;

  const RoundedPasswordField({
    Key key,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFieldContainer(
      child: TextField(
        obscureText: true,
        onChanged: onChanged,
        cursorColor: kPrimaryColor,
        decoration: InputDecoration(
          icon: Icon(
            Icons.lock,
            color: kPrimaryColor,
          ),
          hintText: "Password",
          border: InputBorder.none,
          suffixIcon: Icon(
            Icons.visibility,
            color: kPrimaryColor,
          ),
        ),
      ),
    );
  }
}
  1. 在lib/widgets下创建account_check.dart文件，实现文案组件。
import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class AccountCheck extends StatelessWidget {
  final bool login;
  final Function press;

  const AccountCheck({
    Key key,
    this.login = true,
    this.press,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          login ? "Don't have an Account ? " : "Already have an Account ? ",
          style: TextStyle(color: kPrimaryColor),
        ),
        GestureDetector(
          onTap: press,
          child: Text(
            login ? "Sign Up" : "Sign In",
            style: TextStyle(
              color: kPrimaryColor,
              fontWeight: FontWeight.bold,
            ),
          ),
        )
      ],
    );
  }
}
  1. 在login/components目录下创建body.dart实现前景层渲染。
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterauth/pages/login/components/background.dart';
import 'package:flutterauth/pages/signup/sign_up.dart';
import 'package:flutterauth/pages/widgets/account_check.dart';
import 'package:flutterauth/pages/widgets/rounded_button.dart';
import 'package:flutterauth/pages/widgets/rounded_input_field.dart';
import 'package:flutterauth/pages/widgets/rounded_password_field.dart';

class Body extends StatelessWidget {
  const Body({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          children: [
            Text(
              "LOGIN",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            SvgPicture.asset(
              "assets/icons/login.svg",
              height: size.height * 0.35,
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            RoundedInputField(
              hintText: "Your Email",
              onChanged: (value) {},
            ),
            RoundedPasswordField(
              onChanged: (value) {},
            ),
            RoundedButton(
              text: "LOGIN",
              press: () {},
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            AccountCheck(
              press: () {
              },
            )
          ],
        ),
      ),
    );
  }
}
  1. 在login目录下创建login.dart文件，渲染整个登录页面。
import 'package:flutter/material.dart';
import 'package:flutterauth/pages/login/components/body.dart';

class Login extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Body(),
    );
  }
}
  1. 修改lib/pages/welcome/components/body.dart文件，修改登录按钮的点击事件，添加登录页的路由。
RoundedButton(
                text: "SIGN IN",
                press: (){
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context){
                      return Login();
                    }
                  ));
                },
              ),
  1. 运行APP，并点击登录按钮，会跳转到登录页面。
image.png

实现注册页

  1. 在pages目录下创建signup目录，在signup下创建components目录。
  2. 注册页面也是采用背景层和前景层的布局方式。
  3. 在components目录下创建background.dart文件实现背景层。
import 'package:flutter/material.dart';

class Background extends StatelessWidget {
  final Widget child;

  const Background({
    Key key,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      width: double.infinity,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset(
              "assets/images/signup_top.png",
              width: size.width * 0.35,
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            child: Image.asset(
              "assets/images/main_bottom.png",
              width: size.width * 0.25,
            ),
          ),
          child,
        ],
      ),
    );
  }
}
  1. 在components目录下创建or_deivider.dart文件，实现分割线。
import 'package:flutter/material.dart';
import 'package:flutterauth/constant/color_constant.dart';

class OrDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: size.height * 0.02),
      width: size.width * 0.8,
      child: Row(
        children: [
          buildDivider(),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Text(
              "OR",
              style: TextStyle(
                color: kPrimaryColor,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          buildDivider(),
        ],
      ),
    );
  }

  Expanded buildDivider() {
    return Expanded(
      child: Divider(
        color: Color(0xffd9d9d9),
        height: 1.5,
      ),
    );
  }
}
  1. 在components目录下创建socal_icon.dart文件，用于实现社交icon渲染。
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterauth/constant/color_constant.dart';

class SocalIcon extends StatelessWidget {
  final String iconSrc;
  final Function press;

  const SocalIcon({
    Key key,
    this.press,
    this.iconSrc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: press,
      child: Container(
        margin: EdgeInsets.symmetric(horizontal: 10),
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          border: Border.all(width: 2, color: kPrimaryLightColor),
          shape: BoxShape.circle,
        ),
        child: SvgPicture.asset(
          iconSrc,
          height: 20,
          width: 20,
        ),
      ),
    );
  }
}
  1. 在components目录下创建body.dart文件实现前景层。
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutterauth/pages/login/login.dart';
import 'package:flutterauth/pages/signup/components/background.dart';
import 'package:flutterauth/pages/signup/components/or_divider.dart';
import 'package:flutterauth/pages/signup/components/socal_icon.dart';
import 'package:flutterauth/pages/widgets/account_check.dart';
import 'package:flutterauth/pages/widgets/rounded_button.dart';
import 'package:flutterauth/pages/widgets/rounded_input_field.dart';
import 'package:flutterauth/pages/widgets/rounded_password_field.dart';

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Background(
      child: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "SIGNUP",
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            SvgPicture.asset(
              "assets/icons/signup.svg",
              height: size.height * 0.35,
            ),
            RoundedInputField(
              hintText: "Your Email",
              onChanged: (value) {},
            ),
            RoundedPasswordField(
              onChanged: (value) {},
            ),
            RoundedButton(
              text: "SIGNUP",
              press: () {},
            ),
            SizedBox(
              height: size.height * 0.03,
            ),
            AccountCheck(
              login: false,
              press: () {
              },
            ),
            OrDivider(),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SocalIcon(
                  iconSrc: "assets/icons/facebook.svg",
                  press: () {},
                ),
                SocalIcon(
                  iconSrc: "assets/icons/twitter.svg",
                  press: () {},
                ),
                SocalIcon(
                  iconSrc: "assets/icons/google-plus.svg",
                  press: () {},
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}
  1. 在signup目录下创建sign_up.dart文件，渲染整个注册页面。
import 'package:flutter/material.dart';

import 'components/body.dart';

class SignUp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Body(),
    );
  }
}
  1. 修改lib/pages/welcome/components/body.dart文件，为注册按钮添加点击事件，添加注册页的路由。
RoundedButton(
                text:"SIGN UP",
                color: kPrimaryLightColor,
                textColor: Colors.black,
                press:(){
                  Navigator.push(context, MaterialPageRoute(
                    builder: (context){
                      return SignUp();
                    }
                  ));
                },
              )

  1. 运行App，点击注册按钮即可进入注册页面。


    image.png

注册页和登录页跳转

  1. 修改lib/pages/login/components/body.dart文件，添加跳转注册页逻辑。
AccountCheck(
              press: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return SignUp();
                }));
              },
            )
  1. 修改lib/pages/signup/components/body.dart文件，添加跳转登录页逻辑。
AccountCheck(
              login: false,
              press: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return Login();
                }));
              },
            )
  1. 运行App，可以在注册页和登录页互相跳转。

你可能感兴趣的:(Flutter漂亮UI（Flutter-Auth）)

  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • swagger访问路径 igotyback swagger
    Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
  • 你可能遗漏的一些C#/.NET/.NET Core知识点 追逐时光者 C#.NETDotNetGuide编程指南c#.net.netcoremicrosoft
    前言在这个快速发展的技术世界中，时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节，以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D
  • linux 发展史 种树的猴子 内核java操作系统linux大数据
    linux发展史说明此前对linux认识模糊一知半解，近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统，可是linux是什么时候出现的，又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free
  • “日舍一物”之42——活在当下，并向前看 記二十一
    这件衣服已经有十五、六年了（突然发现我可真是能囤东西啊）。这原本是一件我非常喜欢的衣服，无论是样子，还是质地。照片拍的比较渣，但其实，白色棉质衣料中，尚织有银色的丝线，在阳光或灯光下，会闪亮，不晃眼，但很漂亮。或许正是因为太喜欢了，所以一直保留着，尽管很多年都没有再穿过了。因为不合适了。首先是随着年龄的增长，尽管体重总量没有太多变化（哦，其实还是涨了）。但是体型还是和十几年前不一样了，最明显的就是
  • spring如何整合druid连接池？ 惜.己 springspringjunit数据库javaidea后端xml
    目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE（比如IntelliJIDEA,Ecl
  • esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
    MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • 愿望 石敢敢
    二十岁，我希望苦涩少一点，可爱多一点晴天多一点，阴雨少一点二十岁，我希望相聚长一点，离别短一点微笑多一点，苦涩少一点二十岁，我希望真诚多一点，套路少一点时间慢一点，陪伴久一点二十岁，我希望努力多一点，抱怨少一点早起多一点，拖延少一点漂亮多一点，肉肉少一点所有愿望近一点……
  • android 更改窗口的层次,浮窗开发之窗口层级 Ms.Bu android更改窗口的层次
    最近在项目中遇到了这样的需求：需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互)，和九游的浮窗类似，不过我们的比九游的体验更好，我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗，但是却很少有人去深入的研究背后的流程机制，由于项目中浮窗交互比较复杂，遇到了些坑查看了很多资料，故总结浮窗涉及到的知识点：窗口层级关系(浮窗是如何“浮”的)？浮窗有哪些限制，如何
  • matlab mle 优化,MLE+: Matlab Toolbox for Integrated Modeling, Control and Optimization for Buildings... Simon Zhong matlabmle优化
    摘要：FollowingunilateralopticnervesectioninadultPVGhoodedrat,theaxonguidancecueephrin-A2isup-regulatedincaudalbutnotrostralsuperiorcolliculus(SC)andtheEphA5receptorisdown-regulatedinaxotomisedretinalgan
  • 大三成了分手季? 三聿鱼
    图片发自App一次玩真心话大冒险的时候，知道漂亮的A学姐原来和社团那个帅帅的学长H原来是彼此的前任。知道时还是惊讶的，知道学长H现在在准备考研，上次从湖边回学校时，他说现在很忙，所以社团那边也没有再去。他想考武汉大学，每天都是泡图书馆。后来和学姐A在假期一次一次合作后，也熟络很多，知道她也将要回老家实习，想考公务员。学姐A大学专业是英语，当时想问更多，觉得不变开口，也没再问。在那次真心话大冒险中，
  • TextFiled 中输入金额 宁梓茞
    要求:输入的金额不能超过六位,小数点后面只能输入两位小数如果textFIled中第一位输入的是0,后面必须输入小数点,否则禁止输入用到textfiled代理方法#pragmamark----textFiledDelegate-----(BOOL)textField:(UITextField*)textFieldshouldChangeCharactersInRange:(NSRange)range
  • JAVA·一个简单的登录窗口 MortalTom java开发语言学习
    文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • GenVisR 基因组数据可视化实战(三) 11的雾
    3.genCov画每个突变位点附件的coverage，跟igv有点相似。这个操作起来很复杂，但是图还是挺有用的。可以考虑。由于我的referencegenomebuild是hg38BiocManager::install(c("TxDb.Hsapiens.UCSC.hg38.knownGene","BSgenome.Hsapiens.UCSC.hg38"))library(TxDb.Hsapien
  • 人要有自知之明 孟冬廿六
    今天中午跟一学妹聊天，谈起结婚找对象的问题，小姑娘年龄不算大，二十七岁，但是整个人很清醒很现实，她如今在一国企上班，吃住都不花钱，再加上她经常出差，补助奖金这一块儿也不少，一年下来七七八八的有个小二十万，这对于一个小姑娘来说已经非常不错了，她计划这两年自己付首付买房，然后想要买辆MINI，小姑娘一米七六的个子，长得漂亮有气质，家庭条件也不错，所以对于择偶方面也有一定的要求，最好是事业单位的，父母有
  • 【学生作品】写给未来孩子的一封信（徐奥） 简思莼
    1、人皆养子望聪明，无灾无难到公卿——写给未来孩子的一封信文/徐奥亲爱的孩子:你好啊！我是你过去的母亲，和你一样，现在的我也是一个孩子，这是我给你写的第一封信。未来的你如果是个天真可爱的小公主，我便化身为王子。宠爱你，但不是溺爱；呵护你，但不是纵容。我会坐在书桌前，陪你一起读书写字，一起学习，一起散步。我会在街上给你挑选衣服，把你打扮成漂亮的洋娃娃。我不会压制你的天赋，我会让你选择自己的兴趣爱好。
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 【自动化测试】UI自动化的分类、如何选择合适的自动化测试工具以及其中appium的设计理念、引擎和引擎如何工作 Lossya ui自动化测试工具自动化测试appium
    引言UI自动化测试主要针对软件的用户界面进行测试，以确保用户界面元素的交互和功能符合预期文章目录引言一、UI自动化的分类1.1基于代码的自动化测试1.2基于录制/回放的自动化测试1.3基于框架的自动化测试1.4按测试对象分类1.5按测试层次分类1.6按测试执行方式分类1.7按测试目的分类二、如何选择合适的自动化测试工具2.1项目需求分析2.2工具特性评估2.3成本考虑2.4团队技能2.5试用和评估
  • Python3.7出现“ModuleNotFoundError: No module named ‘Tkinter‘”错误的解决方法 可爱的小红猪 python
    Python3.7出现“ModuleNotFoundError:Nomodulenamed‘Tkinter’”错误的解决方法在网上看到很多针对这个问题的解决方法都是重新安装或配置Tkinter库，但Tkinter是python内置的标准GUI库，安装Python时就已经内置在了库中，不需要另外下载。针对于Tkinter，你的代码很可能是这样的：importTkinter或者是这样fromTkint
  • 设计模式之建造者模式(通俗易懂--代码辅助理解【Java版】） ok!ko 设计模式设计模式建造者模式java
    文章目录设计模式概述1、建造者模式2、建造者模式使用场景3、优点4、缺点5、主要角色6、代码示例：1）实现要求2）UML图3)实现步骤：1）创建一个表示食物条目和食物包装的接口2）创建实现Packing接口的实体类3）创建实现Item接口的抽象类，该类提供了默认的功能4）创建扩展了Burger和ColdDrink的实体类5）创建一个Meal类，带有上面定义的Item对象6）创建一个MealBuil
  • 身体乳哪个牌子的好用?口碑超好的身体乳排行榜前十名 高省APP珊珊
    做小仙女真不容易啊~不仅脸蛋要漂亮精致，连身体每一寸肌肤都不能放过！天气变冷后，稍不注意身上的皮屑就开始“下雪”了~网上购物用高省APP更优惠！高省APP，是2021年推出的平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自用省钱佣金高，分享推广赚钱多的平台，百度有几百万篇报道，也期待你的加入。珊珊导师，高省邀请码666123，注册送2皇冠会员，送万元推广大礼包，
  • 高级UI<第二十四篇>：Android中用到的矩阵常识 NoBugException
    （1）定义在数学中，矩阵（Matrix）是一个按照长方阵列排列的复数或实数集合。由m×n个数aij排成的m行n列的数表称为m行n列的矩阵，简称m×n矩阵。记作：图片.png这m×n个数称为矩阵A的元素，简称为元，数aij位于矩阵A的第i行第j列，称为矩阵A的(i,j)元，以数aij为(i,j)元的矩阵可记为(aij)或(aij)m×n，m×n矩阵A也记作Amn。元素是实数的矩阵称为实矩阵，元素是复
  • linux 安装Sublime Text 3 hhyiyuanyu Python学习linuxsublimetext
    方法/步骤打开官网http://www.sublimetext.com/3，选择64位进行下载执行命令wgethttps://download.sublimetext.com/sublime_text_3_build_3126_x64.tar.bz2进行下载3、下载完成进行解压,执行tar-xvvfsublime_text_3_build_3126_x64.tar.bz解压4、解压完成以后，移动到
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • [星球大战]阿纳金的背叛 comsci
          本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........     但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会     所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院    
  • 看懂它，你就可以任性的玩耍了！ aijuans JavaScript
              javascript作为前端开发的标配技能，如果不掌握好它的三大特点：1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢？如果标配的技能都没有撑握好，怎么可以任性的玩耍呢？怎么验证自己学好了以上三个基本点呢，我找到一段不错的代码，稍加改动，如果能够读懂它，那么你就可以任性了。 function jClass(b
  • Java常用工具包 Jodd Kai_Ge javajodd
    Jodd 是一个开源的 Java 工具集， 包含一些实用的工具类和小型框架。简单，却很强大！ 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb Jodd 被分成众多模块，按需选择，其中 工具类模块有： jodd-core    &nb
  • SpringMvc下载 120153216 springMVC
    @RequestMapping(value = WebUrlConstant.DOWNLOAD) public void download(HttpServletRequest request,HttpServletResponse response,String fileName) { OutputStream os = null; InputStream is = null;
  • Python 标准异常总结 2002wmj python
    Python标准异常总结 AssertionError 断言语句（assert）失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF（Ctrl+d） FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失
  • SQL函数返回临时表结构的数据用于查询 357029540 SQL Server
    这两天在做一个查询的SQL，这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据，这些数据都是INT类型，然后用IN条件进行查询，并且查询这两张表需要通过外部传入参数才能查询出所需数据，于是想到了用SQL函数返回值，并且也这样做了，由于是返回多条数据，所以把查询出来的INT类型值都拼接为了字符串，这时就遇到问题了，在查询SQL中因为条件是INT值，SQL函数的CAST和CONVERST都
  • java 时间格式化 | 比较大小| 时区 个人笔记 7454103 javaeclipsetomcatcMyEclipse
    个人总结！ 不当之处多多包含！ 引用 1.0 如何设置 tomcat 的时区：          位置：(catalina.bat---JAVA_OPTS  下面加上)          set JAVA_OPT
  • 时间获取Clander的用法 adminjun Clander时间
    /**    * 得到几天前的时间    * @param d    * @param day    * @return    */   public static Date getDateBefore(Date d,int day){    Calend
  • JVM初探与设置 aijuans java
    JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台
  • SQL中ON和WHERE的区别 avords
    SQL中ON和WHERE的区别   数据库在通过连接两张或多张表来返回记录时，都会生成一张中间的临时表，然后再将这张临时表返回给用户。   www.2cto.com   在使用left jion时，on和where条件的区别如下：  1、 on条件是在生成临时表时使用的条件，它不管on中的条件是否为真，都会返回左边表中的记录。 
  • 说说自信 houxinyou 工作生活
    自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?     无论工作还
  • WEBLOGIC事务超时设置 bijian1013 weblogicjta事务超时
            系统中统计数据，由于调用统计过程，执行时间超过了weblogic设置的时间，提示如下错误： 统计数据出错! 原因：The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal
  • 两年已过去，再看该如何快速融入新团队 bingyingao java互联网融入架构新团队
    偶得的空闲，翻到了两年前的帖子 该如何快速融入一个新团队，有所感触，就记下来，为下一个两年后的今天做参考。     时隔两年半之后的今天，再来看当初的这个博客，别有一番滋味。而我已经于今年三月份离开了当初所在的团队，加入另外的一个项目组，2011年的这篇博客之后的时光，我很好的融入了那个团队，而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一
  • 【Spark七十七】Spark分析Nginx和Apache的access.log bit1129 apache
    Spark分析Nginx和Apache的access.log，第一个问题是要对Nginx和Apache的access.log文件进行按行解析，按行解析就的方法是正则表达式：   Nginx的access.log解析正则表达式   val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q
  • Erlang patch bookjovi erlang
    Totally five patchs committed to erlang otp, just small patchs. IMO, erlang really is a interesting programming language, I really like its concurrency feature. but the functional programming style
  • log4j日志路径中加入日期 bro_feng javalog4j
    要用log4j使用记录日志，日志路径有每日的日期，文件大小5M新增文件。 实现方式 log4j: <appender name="serviceLog" class="org.apache.log4j.RollingFileAppender"> <param name="Encoding" v
  • 读《研磨设计模式》-代码笔记-桥接模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 个人觉得关于桥接模式的例子，蜡笔和毛笔这个例子是最贴切的：http://www.cnblogs.com/zhenyulu/articles/67016.html * 笔和颜色是可分离的，蜡笔把两者耦合在一起了：一支蜡笔只有一种
  • windows7下SVN和Eclipse插件安装 chenyu19891124 eclipse插件
    今天花了一天时间弄SVN和Eclipse插件的安装，今天弄好了。svn插件和Eclipse整合有两种方式，一种是直接下载插件包，二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别，始终是没装上。最后在网上找到了适合的版本。所用的环境系统：windows7JDK：1.7svn插件包版本：1.8.16Eclipse：3.7.2工具下载地址：Eclipse下在地址：htt
  • [转帖]工作流引擎设计思路 comsci 设计模式工作应用服务器workflow企业应用
    作为国内的同行，我非常希望在流程设计方面和大家交流，刚发现篇好文(那么好的文章，现在才发现，可惜)，关于流程设计的一些原理，个人觉得本文站得高，看得远，比俺的文章有深度，转载如下 ================================================================================= 自开博以来不断有朋友来探讨工作流引擎该如何
  • Linux 查看内存，CPU及硬盘大小的方法 daizj linuxcpu内存硬盘大小
    一、查看CPU信息的命令 [root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id" model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz model name :
  • linux 踢出在线用户 dongwei_6688 linux
    两个步骤： 1.用w命令找到要踢出的用户，比如下面：   [root@localhost ~]# w 18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00 USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT
  • 放手吧,就像不曾拥有过一样 dcj3sjt126com
    内容提要： 静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事，触碰生命最深层次的感动，献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由，将那些令你痛苦的、扛起的、背负的，一并都放下吧！把憔悴的面容换做一种清淡的微笑，把沉重的步伐调节成春天五线谱上的音符，让自己踏着轻快的节奏，在人生的海面上悠然漂荡，享受宁静与
  • php二进制安全的含义 dcj3sjt126com PHP
    PHP里，有string的概念。 string里，每个字符的大小为byte（与PHP相比，Java的每个字符为Character，是UTF8字符，C语言的每个字符可以在编译时选择）。 byte里，有ASCII代码的字符，例如ABC，123，abc，也有一些特殊字符，例如回车，退格之类的。 特殊字符很多是不能显示的。或者说，他们的显示方式没有标准，例如编码65到哪儿都是字母A，编码97到哪儿都是字符
  • Linux下禁用T440s，X240的一体化触摸板(touchpad) gashero linuxThinkPad触摸板
    自打1月买了Thinkpad T440s就一直很火大，其中最让人恼火的莫过于触摸板。   Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位，还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板，不再有实体的按键了。问题是要是好用也行。   实际使用中，触摸板一堆问题，比如定位有抖动，以及按键时会有飘逸。这就导致了单击经常就
  • graph_dfs hcx2013 Graph
    package edu.xidian.graph; class MyStack { private final int SIZE = 20; private int[] st; private int top; public MyStack() { st = new int[SIZE]; top = -1; } public void push(i
  • Spring4.1新特性——Spring核心部分及其他 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • 配置HiveServer2的安全策略之自定义用户名密码验证 liyonghui160com
        具体从网上看   http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication   LDAP Authentication using OpenLDAP Setting
  • 一位30多的程序员生涯经验总结 pda158 编程工作生活咨询
    1.客户在接触到产品之后，才会真正明白自己的需求。 　　这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候，他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间，所有安全防御系统都将失败。 　　安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它，因为黑客只要有一次成功，就可以彻底打败你。   3.
  • 分布式web服务架构的演变 自由的奴隶 linuxWeb应用服务器互联网
    最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易
  • 初探Druid连接池之二——慢SQL日志记录 xingsan_zhang 日志连接池druid慢SQL
    由于工作原因，这里先不说连接数据库部分的配置，后面会补上，直接进入慢SQL日志记录。   1.applicationContext.xml中增加如下配置： <bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他