四时宝库

程序员的知识宝库

2024年09月11日

在Angular 5中使用模板驱动的表单进行验证

介绍

在这篇文章中，我们将看到如何在Angular 5中使用模板驱动的表单进行验证; 这只是一种可以遵循的不同方法，正如我们在前一篇文章中讨论的另一种方式。在本文结尾处，您将了解如何使用模板驱动表单在Angular 5应用程序中实现验证。本文是开发Angular 5 App系列的延续 ; 如果你还没有浏览以前的帖子，我强烈建议你这样做。您可以在下面找到以前帖子的链接。我希望你会喜欢这篇文章。

背景

验证在所有应用程序中都起着至关重要的作用，无论它以何种语言开发。由于它是一个重要部分，因此有很多方法可以实现它。我们将在这里看看模板驱动的表单方法。

作者:sishi88 , 分类:技术教程 , 浏览:7 , 评论:0

2024年09月11日

使用机器学习数据集构建销售预测Web应用程序

介绍

互联网上有很多资源可以找到关于机器学习数据集的见解和训练模型，但是关于如何使用这些模型构建实际应用程序的文章很少。

因此，今天我们将通过首先使用hackathon中的数据集来训练视频游戏销售预测模型，然后使用经过训练的模型来创建一个基本应用程序，根据用户输入为我们提供销售预测来学习此过程。

本文分为多个部分，你可以一个接一个地学习，而不必一口气完成它。从我第一次选择数据集以来，我花了整整一周的时间来完成应用程序。因此，请花时间专注于学习构建应用程序的各个方面，而不是只注意最终产品。

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

2024年09月11日

React-列表和Key的综合示例（react list key）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    titleInfo: '列表和Key简单示例',
    titleOne: 'React.js开发示例',
    contentOne: 'React.js组件的应用开发',
    titleTwo: 'React.js安装方法',
    contentTwo: '可以使用npm安装',
}

const numbers = [1, 2, 3];
function NumberList(pros) {
    const numbers = pros.numbers;
    const listItems = numbers.map((number) => <li key={number.toString()}>{number}</li>);
    return (
        <ul>{listItems}</ul>
    );
}

function ListItem(props) {
    // 不需要指定Key的示例
    return <li>{props.value}</li>;
}

function NumberListTwo(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) => 
        // key应该在数组的上下文中被指定的示例
        <ListItem key={number.toString()} value={number}/>
    );
    return (
        <ul>{listItems}</ul>
    );
}

function Blog(props){
    const sidebar = (
        <ul>
            {props.posts.map((post) =>
                <li key={post.id}>{post.title}</li>
            )}
        </ul>
    );
    const content = props.posts.map((post) =>
        <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
        </div>
        
    );
    return (
        <div>
            {sidebar}
            <hr />
            {content}
        </div>
    );
}

const posts =[
    {id: 1, title: infoMap.titleOne, content: infoMap.contentOne},
    {id: 2, title: infoMap.titleTwo, content: infoMap.contentTwo},
];

const ListAndKeyExample = () => {
    return (
        <span>
            <h3>{infoMap.titleInfo}</h3>
            <NumberList numbers={numbers} />
            <hr/>
            <NumberListTwo numbers={numbers} />
            <hr/>
            <Blog posts={posts} />
        </span>
    );
}

export default ListAndKeyExample;

作者:sishi88 , 分类:技术教程 , 浏览:4 , 评论:0

2024年09月11日

React-Key的简单示例（react中keys的作用）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    bookName: '书名:《',
    bookNameEnd: '》',
    author: '作者:',
    publisher:'出版社:',
    keyWords:'关键词:',
    titleInfo: 'key简单实例',
}

const alpha = ['a', 'b'];
var i = 0;
const alphaList = alpha.map((alpha)=> <li key={i++}>{alpha}</li>);

const id = new Array(3);

for (let i = 0; i < id.length; i++){
    id[i] = Math.round((Math.random() * Math.pow(10, 10)));
}
const alphaList2 = alpha.map((alpha, index)=> <li key={id[index].toString()}>{index}-----{alpha}</li>);

i = 0;
function MapList(props){
    const alpha = props.alpha;
    const list = alpha.map((alpha)=> <li key={i++}>{alpha.toUpperCase()} - {alpha}</li>);
    return (
        <ul>
            {list}
        </ul>
    );
}

function BookList(props){
    const books = props.books;
    const bookName = books.name;
    const author = books.author;
    const publisher = books.publisher;
    i = 0;
    const skills = books.skills;
    const bookSkills = skills.map((skill)=> <li key={i++}>{skill}</li>);
    let j = 0;
    return (
        <ul>
            <li>{infoMap.bookName} {bookName} {infoMap.bookNameEnd}</li>
            <li>{infoMap.author} {author}</li>
            <li>{infoMap.publisher} {publisher}</li>
            <li key={j++}>{infoMap.keyWords}
                <ul>
                    {bookSkills}
                </ul>
            </li>
        </ul>
    );
}

i = 0;
function BookComp(props){
    const bookList = props.bookList;
    const bookListMap = bookList.map((books)=> <BookList books={books} key={i++}></BookList>);
    return (
        <ul>
            {bookListMap}
        </ul>
    );

}

const book1 = {
    name: 'Python编程从入门到实践',
    author: '埃里克·马瑟斯',
    publish: '人民邮电出版社',
    skills: ['Python'],
}

const book2 = {
    name: 'JavaScript高级程序设计',
    author: 'Nicholas C.Zakas',
    publish: '人民邮电出版社',
    skills: ['JavaScript', '脚本语言'],
}

const book3 = {
    name: 'Rust程序设计',
    author: '吉姆·布兰迪',
    publish: '人民邮电出版社',
    skills: ['Rust', '编程语言'],
}

const bookList = [book1, book2, book3];
const numbers = [1, 2, 3];
const listItems = numbers.map((number)=> <li key={number.toString()}>{number}</li>);

const KeyExample = () => {
    return(
        <span>
            <h3>{infoMap.titleInfo}</h3>
            <ul>
                {alphaList}
            </ul>
            <hr/>
            <ul>{alphaList2}</ul>
            <hr/>
            <MapList alpha={alpha}/>
            <hr/>
            <ul>
                {listItems}
            </ul>
            <BookComp bookList={bookList}/>

        </span>
    )
}

export default KeyExample;

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

2024年09月11日

「asp.net core 系列」5 布局页和静态资源

0. 前言

在之前的4篇的内容里，我们较为详细的介绍了路由以及控制器还有视图之间的关系。也就是说，系统如何从用户的HTTP请求解析到控制器里，然后在控制器里处理数据，并返回给视图，在视图中显示出来。这一篇我将为大家介绍基础的最后一部分，布局页和静态资源引入。



1. 布局页

在控制器和视图那一篇，我们了解到_ViewStart 里设置了一个Layout属性的值，这个值正是用来设置布局页的。所谓的布局页，就是视图的公用代码。在实际开发中，布局页通常存放我们为整个系统定义的页面框架，视图里写每个视图的页面。

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

2024年09月11日

七爪源码:React-Bootstrap UI 库入门

了解如何在您的 React 项目中安装和使用 Bootstrap - 以正确的方式。

根据 Stack Overflow 开发者调查，React 是目前最流行的 JavaScript 框架。 在本文中，我将向您介绍一个名为“React-Bootstrap”的 UI 库，它提供了出色的 UI 组件。 互联网上提供了许多 React UI 库，但 React-Bootstrap 是迄今为止 Web 开发人员中最受欢迎的选择。 感谢创建者保持其与标准 Bootstrap 框架的相似性以及广泛的 Bootstrap 主题的可用性。

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

2024年09月11日

React-鼠标事件处理（电子表格文字跟鼠标事件宏代码）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    clickAlertInfo: '发生了鼠标单击事件',
    linkPreventInfo: '即将访问百度官网',
    baiduWebsiteInfo: 'http://www.baidu.com',
    gotoBaiduWebsiteInfo: '访问百度官网',
    buttonToAlertInfo: '类事件处理正常',
    buttonToValue: '类的事件',
    callbackAlertInfo: '使用了箭头函数',
    callbackValue: '回调操作',
    eventWithPropsAlertInfo: '传递的参数为:name=',
    eventWithPropsValue: '带参数的事件处理',
    onOffStateAlertInfo: '现有的状态为',
    onOffButtonValue1: '开关按钮(初始为开)',
    onOffButtonValue2: '开关按钮(初始为关)',
    titleInfo: '事件处理的简单示例',
    buttonInfo: '鼠标单击事件示例：',
    buttonValue: '单击鼠标事件',
    linkExInfo: '超链接访问示例：',
    buttonToInfo: '类的事件处理示例：',
    callbackInfo: '回调操作示例：',
    eventWithPropsInfo: '带参数的事件处理示例：',
    onOffStateInfo: '状态的变化示例：',
    preventDefaultInfo: '使用preventDefault阻止默认行为：',
    actionLinkInfo: '单击Link'

}

/*鼠标单价事件处理 */
function onBtnClick(){
    alert(infoMap.clickAlertInfo);
}

/*阻止事件默认行为 */
function PreventLink(){
    function handleClick(){
        alert(infoMap.linkPreventInfo);
    }
    return (
        <a href={infoMap.baiduWebsiteInfo} onClick={handleClick}>{infoMap.gotoBaiduWebsiteInfo}</a>
    );
}

class BtnClickComp extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick2(){
        alert(infoMap.buttonToAlertInfo);
    }
    render() {
        return (
            <button onClick={this.handleClick2}>
                {infoMap.buttonToValue}
            </button>
        );
    }
}

/*使用了箭头函数回调 */
class CallBackBtnClickComp extends React.Component {
    constructor(props){
        super(props);
    }
    handleClick = () => {
        alert(infoMap.callbackAlertInfo);
    }
    render() {
        // 此语法确保 handleClick（）方法内的 `this` 已被绑定
        return (
            <button onClick={(e) => this.handleClick(e)}>
                {infoMap.callbackValue}
            </button>
        );
    }
}

/*在事件处理方法中传递参数 */
class ParamsEventComp extends React.Component {
    constructor(props){
        super(props);
        this.name = props.name;
    }
    passParamsClick(name, e){
        e.preventDefault();
        alert(infoMap.eventWithPropsAlertInfo + " " +name);
    }
    render() {
        return (
            <div>
                {/* 通过箭头?方法传递参数 */}
                <button onClick={(e) => this.passParamsClick(this.name, e)}>
                    {infoMap.eventWithPropsValue}
                </button>
            </div>
        );
    }
}

class ToggleBtnComp extends React.Component {
    constructor(props){
        super(props);
        this.isToggleOn = props.isToggleOn;
        // 为了在回调中使用this，这里的绑定比不可少。
        this.handleClick = this.toggleBtnClick.bind(this);
    }
    toggleBtnClick(isToggleOn, e){
        e.preventDefault();
        alert(infoMap.onOffStateAlertInfo + " " + this.isToggleOn);
        this.isToggleOn = !this.isToggleOn;
        
    }
    render() {
        return (
            <button onClick={(e) => this.toggleBtnClick(this.isToggleOn, e)}>
                {this.isToggleOn ? infoMap.onOffButtonValue1 : infoMap.onOffButtonValue2}
            </button>
        )
    }
}

function ActionLink(){
    // e是合成事件，React根据W3C规范来定义合成事件，开发时无须考虑跨浏览器兼容性问题
    function handleClick(e){
        e.preventDefault();
        alert(infoMap.actionLinkInfo);
    }
    return (
        <a href="#" onClick={handleClick}>
            {infoMap.actionLinkInfo}
        </a>
    )
}

const EventExample = () => {
    return (
        <span>
            <h2>{infoMap.titleInfo} </h2>
            <span>{infoMap.buttonInfo}</span>
            <button onClick={onBtnClick}>{infoMap.buttonValue}</button>
            <hr/>
            <span>{infoMap.linkExInfo}<PreventLink/></span>
            <hr/>
            <span>{infoMap.buttonToInfo}<BtnClickComp/></span>
            <hr/>
            <span>{infoMap.callbackInfo}<CallBackBtnClickComp/></span>
            <hr/>
            <span>{infoMap.eventWithPropsInfo}<ParamsEventComp name={'ls'}/></span>
            <hr/>
            <span>{infoMap.onOffStateInfo}<ToggleBtnComp isToggleOn={true}/></span>
            <hr/>
            <span>{infoMap.preventDefaultInfo}<ActionLink/></span>
        </span>
    );
}
                            
export default EventExample;

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

2024年09月11日

React-组件的切分（react组件三大属性）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    url: 'src/chapterOne/Assets/liupiaopiao.png',
    loadingInfo: '加载中...',
    nickName: 'liupiaopiao_666',
    userName: '柳飘飘',
    age: 18,
    nickNameInfo: '昵称：',
    userNameInfo: '用户名：',
    ageInfo: '年龄：',
    partTitle: '组件的切分与组合的简单示例',
    dateNameInfo: '时间：',
};

// 格式化时间
function formatDate(date) {
    return date.toLocaleDateString();
}

// 封装图片信息
const avatar = {
    url: infoMap.url,
    alt: infoMap.loadingInfo,
    nickName: infoMap.nickName
};

// 封装用户信息
const userInfo = {
    name: infoMap.userName,
    age: infoMap.age,
};

// 封装时间信息
const date = {
    date: formatDate(new Date()),
};

// 图片信息组件
function Avatar(props) {
    return (
        <span>
            <img src={props.avatar.url} alt={props.avatar.alt} />
            <p>{infoMap.nickNameInfo} {props.avatar.nickName}</p>
        </span>
    );
}

// 用户信息组件
function UserInfo(props) {
    return (
        <span>
            <p>{infoMap.userNameInfo} {props.userInfo.name}</p>
            <p>{infoMap.ageInfo} {props.userInfo.age}</p>
        </span>
    );
}

// 用户详细信息组件
function UserDetailInfo(props) {
    return (
        <div>
            <Avatar avatar={props.avatar} />
            <hr/>
            <UserInfo userInfo={props.userInfo} />
            <hr/>
            <span>
                <p>{infoMap.dateNameInfo} {props.curdate.date}</p>
            </span>
        </div>
    );
}

// 用户详细信息组件，展示用户信息中的细节数据
const userDeatil = <UserDetailInfo avatar={avatar} userInfo={userInfo} curdate={date}/>;  

const ComponentDispart= () => {
    return(
        <span>
            <h3>{infoMap.partTitle}</h3>
            {userDeatil}
        </span>
    );
}

export default ComponentDispart;

作者:sishi88 , 分类:技术教程 , 浏览:6 , 评论:0

2024年09月11日

React-键盘事件示例（pygame键盘事件大全）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';


const infoMap = {
    msgInit: '通过键盘在文本框输入字符后在浏览器Console中显示对应的ASCII码',
    alertInfo: '按回车键，msg值为：',
}

class KeyBind extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: infoMap.msgInit,
        }
    }
    keyUp = (e) => {
        console.log(e.keyCode);
        if (e.keyCode === 13) {
            alert(infoMap.alertInfo + e.target.value);
        }
    }
    render() {
        return (
            <div>
                <h2>{infoMap.msgInit}</h2>
                <input type="text" onKeyUp={this.keyUp} />
            </div>
        )
    }
}

const KeyboardEventExample = () => {
    return (
        <span>
            <KeyBind/>
        </span>
    )
}

export default KeyboardEventExample;

作者:sishi88 , 分类:技术教程 , 浏览:4 , 评论:0

2024年09月11日

React-条件渲染简单示例（react 条件渲染）

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';

const infoMap = {
    loggedInInfo: '欢迎登录此系统。',
    loggedOutInfo: '请先登录系统。',
    loginButtonInfo: '登录',
    logoutButtonInfo: '退出登录',
    stateInfo: '当前状态为：',
    scoreInfo: '得分',
    passInfo: '分，通过考试。',
    notPassInfo: '分，未通过考试。',
    passScore: 60,
    btnInfo: '按钮的使用2：',
    cool: '今天真冷。',
    warm: '今天气温舒适。',
    hot: '今天有点热。',
    veryHot: '今天真的很热。',
    how: '今天气温如何？',
    coolStandard: 0,
    warmStandard: 25,
    hotStandard: 39,
    title1Info: 'if条件简单示例',
    trueInfo: '初始条件为true的结果：',
    falseInfo: '初始条件为false的结果：',
    title2Info: '按钮的使用1：',
    title3Info: '与(&&)运算和或(||)运算的简单示例',
    title4Info: '三目运算简单示例',
    temperature: 25,
    temperatureUnit: '度，',
}

function UserLoggedInComp(props) {
    return <span>{infoMap.loggedInInfo}</span>
}

function UserLoggedOutComp(props) {
    return <span>{infoMap.loggedOutInfo}</span>
}

// 用if语句进行条件渲染
function UserLoggedComp(props) {
    const isLogged = props.isLogged;
    if (isLogged) {
        return <UserLoggedInComp />;
    } else {
        return <UserLoggedOutComp />;
    }
}

// 登录按钮组件
function LoginButton(props){
    return (
        <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={props.onClick}>
            {infoMap.loginButtonInfo}
        </button>
    );
}

// 退出登录按钮组件
function LogoutButton(props){
    return (
        <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={props.onClick}>
            {infoMap.logoutButtonInfo}
        </button>
    );
}

// 条件登录控件组件
class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.isLoggedIn = props.isLoggedIn;
    }

    handleLoginClick() {
        this.isLoggedIn = !this.isLoggedIn;
        alert(infoMap.stateInfo + this.isLoggedIn);
    }

    handleLogoutClick(){
        this.isLoggedIn = !this.isLoggedIn;
        alert(infoMap.stateInfo + this.isLoggedIn)
    }

    render() {
        let button;
        if (this.isLoggedIn){
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        } else {
            button = <LoginButton onClick={this.handleLoginClick} />;
        }
        return (
            <div>
                <UserLoggedComp isLogged={this.isLoggedIn} />
                {button}
            </div>
        );
    }
}

const score = [90, 60, 50];
function PassTestComp(props) {
    return (
        <p>
            {infoMap.scoreInfo}<b>{props.score}</b>{infoMap.passInfo}
        </p>
    )
}
function NotPassTestComp(props) {
    return(
        <p>
            {infoMap.scoreInfo}<b>{props.score}</b>{infoMap.notPassInfo}
        </p>
    );
}

// 使用&&和||
function TestPass(props){
    const score = props.score;
    return (
        <div>
            {
                (score >= infoMap.passScore && <PassTestComp score={score} />) || (score < infoMap.passScore && <NotPassTestComp score={score} />)
            }
        </div>
    );
}

// 运用三目运算
function TestPass2(props) {
    const score = props.score;
    return (
        <div>
            {
                (score >= infoMap.passScore ? <PassTestComp score={score} /> : <NotPassTestComp score={score} />)
            }
        </div>
    );
}

function Banner(props) {
    if (!props.isBanner){
        return null;
    }
    return (
        <div className="banner">
            {infoMap.btnInfo}
        </div>
    );
}

class BannerComp extends React.Component {
    constructor(props) {
        super(props);
        this.showBanner = props.showBanner;
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick() {
        alert(this.showBanner)
    }

    render() {
        return (
            <div>
                <Banner isBanner={this.showBanner} />
                <button className="btn btn-mt-3 btn-primary btn-block my-2" onClick={this.handleToggleClick}>
                    {this.showBanner ? '隐藏' : '显示'}
                </button>
            </div>
        );
    }
}

function TempLevel(props){
    if (props.wLevel <= infoMap.coolStandard){
        return <p>{infoMap.cool}</p>;
    } else if ((props.wLevel > infoMap.coolStandard) && (props.wLevel <= infoMap.warmStandard)){
        return <p>{infoMap.warm}</p>;
    } else if ((props.wLevel > infoMap.warmStandard) && (props.wLevel <= infoMap.hotStandard)){
        return <p>{infoMap.hot}</p>;
    } else if (props.wLevel > infoMap.hotStandard) {
        return <p>{infoMap.veryHot}</p>
    } else {
        return <p>{infoMap.how}</p>
    }
}

class WaterTempComp extends React.Component {
    constructor(props) {
        super(props);
        this.temperature = props.temperature;
    }
    render() {
        const temperature = this.temperature;
        return (
            <TempLevel wLevel={parseFloat(temperature)}/>
        );
    }

}

const IfExample = () => {
    return (
    <span>
        <h3>{infoMap.title1Info}</h3>
        {infoMap.trueInfo}<UserLoggedComp isLogged={true}/>
        <br/>
        {infoMap.falseInfo}<UserLoggedComp isLogged={false}/>
        <hr/>
        {infoMap.title2Info}<LoginControl isLoggedIn={true}/>
        <LoginControl isLoggedIn={false}/>
        <hr/>
        <h3>{infoMap.title3Info}</h3>
        <TestPass score={score[0]} />
        <TestPass score={score[1]} />
        <TestPass score={score[2]} />
        <hr/>
        <h3>{infoMap.title4Info}</h3>
        <TestPass2 score={score[0]} />
        <TestPass2 score={score[1]} />
        <TestPass2 score={score[2]} />
        <hr/>
        <BannerComp showBanner={true} />
        <hr/>
        {infoMap.temperature}{infoMap.temperatureUnit}<WaterTempComp temperature={infoMap.temperature} />
    </span>
    )
    
}

export default IfExample;

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

<< < 1 2 3 4 > >>
控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接